Archived topic
Menu folding out of view
9 replies · Started by Coen on September 10, 2017
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
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.
Thanks, I will look into it.
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?
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.
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
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";
}
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
We'll leave it at this for now
Sounds good - let me know if you need more help :)