[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
    Posts
  • #608666
    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!

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #608734
    David
    Staff
    Customer Support

    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

    #608743
    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!

    #608753
    David
    Staff
    Customer Support

    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.

    #608756
    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

    #608764
    David
    Staff
    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!

    #608779
    Bernat

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

    #608782
    David
    Staff
    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.