[Resolved] Sub Nav Open By Default

Home Forums Support Sub Nav Open By Default

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1066964
    Richard

    Hi There!

    I am building a site that has a sectioned home page as well as individual pages.

    For the home page I have a few navigation elements (anchored links) on the page itself that shuttles the visitor around, but I am also offering the anchored links in the slide out menu.

    My ultimate goal is to have the home page anchored (child) links visible at all times in the slide out menu. So, when a visitor is surfing around the site they can always see and have access to the home page “quick links” through the slide out nav without having to first click the parent menu to see the links.

    By default, sub navigation is hidden so I tried some CSS magic that would target the parent menu’s class and “display:block”. Something like:

    #generate-slideout-menu.main-navigation ul li.menu-item-91 ul {
        display: block!important;
    }

    However, the above had no effect.

    Then I tried to some magic with javascript to add the “toggled-on” class when the page loads (this class is normally added when a use clicks or hovers the parent menu).

    $('.sub-menu').addClass('toggled-on')

    This worked on an initial page load but as soon as a menu item is accessed the class gets stripped. The next time the slide out menu is accessed the parent menu is closed.

    Is there a way to permanently open a parent’s child menu? And is there a way to target a specific sub-menu so that, if other parent’s have children, I can selectively open the menus that I want and leave the others closed by default?

    Any help would be greatly appreciated. I know there are probably repercussions to this that I haven’t thought of but I would love to at least get this working.

    Thanks in advance.

    -Richard

    #1067227
    David
    Staff
    Customer Support

    Hi there,

    Try this CSS:

    #generate-slideout-menu.main-navigation ul li.current_page_parent ul {
        display: block !important; 
    }
    #1067660
    Richard

    Hi David,

    Thank you for the response and the code recommendation.

    The biggest difference that I see with the new CSS as it relates to my original CSS override is adding the “.current_page_parent” class. How I read this, if a visitor is on the home page and they access the main menu it should display the sub menu. If they are on any other page the home page sub menu would remain closed.

    I am hoping to have the home page sub menu open regardless to what page the visitor is on. I want visitors to have the option to navigate to a particular section of the home page at any point and on any page within their interaction of the site.

    Back to the code. I did try it, and while it does override the display:none, it doesn’t open the sub menu.

    As far as I can tell the sub nav becomes visible because a new class is added when clicked called “toggled-on”. This then references the following CSS:

    #generate-slideout-menu.main-navigation ul ul.toggled-on {
        display: block !important;
    }

    Even if I added

    #generate-slideout-menu.main-navigation ul ul.toggled-on {
        display: block !important;
    }

    It would not take any effect because the toggled-on class is not present until there is some form of interaction with the parent menu. This is why I tried adding the toggled-on class via javascript. But, as I outlined in the beginning of this thread, there appears to be a removal of the toggled-on class as the slideout menu gets open and closed which overrides the javascript.

    Funny enough I even tried adding two toggled-on classes to the sub-menu in hopes that I could salvage at least one of the classes but it completely strips all classes.

    Any other thoughts?

    Thank you,
    Richard

    #1067708
    David
    Staff
    Customer Support

    Try this:

    #generate-slideout-menu.main-navigation ul li.page-item-13 ul {
        display: block !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        height: auto;
        overflow: visible;
    }
    #1067830
    Richard

    David,

    That worked well! Thank you.

    The only change I made was to target the menu-item itself as opposed to the page-item. Here is the CSS that worked exactly as I envisioned.

     #generate-slideout-menu.main-navigation ul li.menu-item-91 ul {
        display: block !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        height: auto;
        overflow: visible;
    }

    Cheers!
    -Richard

    #1067862
    David
    Staff
    Customer Support

    Glad to be of help.
    You may want to give that parent menu item a CSS Class to apply the style to instead:

    https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

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