[Resolved] Menu folding out of view

[Coen]

I’m just starting with GP and I have the Premium plugin. I am building my menu. Right aligned. But what I see happening is that when the menu unfolds, the contents of the menu will be out of view.

https://new.landcruisingadventure.com/

What am I doing wrong?

Adventurous greetings,
Coen

[Tom]

Hi there,

This should help: https://docs.generatepress.com/article/navigation-dropdown/#open-sub-menus-to-the-left

This functionality is being added into the core theme, where it will detect if it has to open to the left or right.

[Coen]

Thanks, I will look into it.

[Coen]

So I switched the menu over to the left side and I have an issue with Safari on only one computer. The menu only folds out one segment. On other browsers it works. Just that one computer. Our second computer with Safari works flawlessly.

Any ideas?

[Tom]

Same version of Safari? If it works in one browser and not the other, it means there’s something strange going on with that one computer.

[Coen]

Okay, that is not of my worries right now.

So I am not so happy with the menu on the left, so I switched it over to the right again and applied your css code.

That works… I see that when I have a dropdown with only the < symbols, all lines up very nice. But, when I have a mixed bunch of menu items, with some that have children and some that have not, I feel that the < symbol should stick out to the left and that the menu items itself should be lined.

Not sure if I am making myself clear?

If you could have a look at my menu now and see under About, I think you will see what I mean: https://new.landcruisingadventure.com

Thanks for helping me out.
Adventurous greetings,
Coen

[Tom]

Hmm, not sure if the arrow sticking out the left side would look good.

Instead, maybe it would be best to keep them on the right? This would then be your entire block of CSS:

.dropdown-hover .main-navigation ul ul {
    left: auto;
    right: 0;
}

.dropdown-hover .main-navigation ul ul ul {
    left: auto;
    right: 100%;
}

.dropdown-hover .main-navigation .children .dropdown-menu-toggle:before, 
.dropdown-hover .main-navigation .sub-menu .dropdown-menu-toggle:before {
    content: "\f104";
}

[Coen]

Thank you Tom, this makes it better. Still not perfect, but for now it will do.

Thanks again, I’ll keep building…
Adventurous greetings,
Coen

[Coen]

We’ll leave it at this for now

[Tom]

Sounds good – let me know if you need more help 🙂

[Author]

Posts