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

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

Home Forums Support Menu 3rd sub element is not visible if is at right

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #608666

    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


    GeneratePress 2.1.2
    GP Premium 1.6.2
    Customer Support

    Hi there,

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



    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!

    Customer Support

    Hi there, the code below in that link ie.

    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.


    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

    Customer Support

    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!


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

    Customer Support

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.