[Resolved] Menu 3rd sub element is not visible if is at right

[Bernat]

Hello, I am working on 2 websites made with GP+Elementor and have the same issue:
– If make a menu aligned alt right, and the last menu element have 2 sub levels, the second sub level is not visible because is outside the browser

I upload a image th see more easy where is the bug: https://drive.google.com/open?id=1cLj3JiXvoH6KphhZ4sby_Gf5sVZn0KH0

thanks!

[David]

Hi there,

these articles may be of use that make the sub menus open to the left.

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

[Bernat]

Hello, thanks for fast reply,

This solution is not totally good, because the rest of the drop-down menus will be very rare.
A possible solution is that will only affects the last option.
I think that this could be done in two possibly ways:
1- using :last-child so that the css of the documentation only affects the last menú button
2- add a class to the menu button that you want to affect

In both cases I will need a little help because you would not know how to modify the css that you indicate in the documentation.

Thank you!

[David]

Hi there, the code below in that link ie.
https://docs.generatepress.com/article/navigation-dropdown/#opening-specific-sub-menus-to-the-left

Provides the option to set which menus you want to be effected. you just need to add the provided custom class to the menu items.

[Bernat]

Hello again,
I solve thiis modify the code in documentation:

1- I add a class in the last menú button “menuesquerre”

2- Add the modified css:

.main-navigation:not(.toggled) ul li.menuesquerre ul {
left: auto;
right: 0;
}

.dropdown-hover .main-navigation:not(.toggled) ul li.menuesquerre ul li:hover>ul {
left: auto;
right: 100%;
}

.main-navigation .main-nav ul li.menuesquerre ul li.menu-item-has-children > a {
padding-left: 0;
padding-right: 20px;
}

.main-navigation ul li.menuesquerre ul .menu-item-has-children .dropdown-menu-toggle {
float: left;
padding-left: 20px;
padding-right: 15px;
}

.main-navigation li.menuesquerre.children .dropdown-menu-toggle:before,
.main-navigation li.menuesquerre .sub-menu .dropdown-menu-toggle:before {
content: “\f104”;
}

———

This solution is perfect,
I think this will help too many people and must be mentioned in documentation.
Thanks for all

[David]

Hi, glad to hear you got this resolved and thanks for sharing, you will see that the same code (with a different selector) is provided in the link above. Have a good day!

[Bernat]

Oh! sorry, I have the bad habit to do not read all… hahaha,
thanks a lot!

[David]

Not a problem, i am sure a lot of people will find this Topic useful 🙂

[Author]

Posts