[Resolved] Vertical menu with collapsible subitems

[Frans]

I would like to have an additional vertical menu in a sidebar (e.g. in a widget). I created a new menu with items and subitems. In the sidebar (custom navigation widget), all items and subitems are always visible. I would like to have only the items and after clicking or hovering a parent item, the appearance or fold out of the subitems (as happens in the primary generatepress dropdown menu).

How can it be created ? A plugin ? Additonal css ?

Frans van Ittersum

[Tom]

Hi there,

If you’re not already using the Secondary Nav module, you can use it.

If you are, then we’ll need some custom CSS for the widget. Can you link me to your site?

[Frans]

Thanks !

My idea is that the Secondary Nav module always results in a menu above the header. I do not know how to get it in a widget in the sidebar. As mentioned, I made a new menu and put it in a “navigation menu” widget. Then, the submenus are not collapsable.

I found a plugin, Wpdevart vertical menu, that works as I intended. Unfortunately, this plugin does not apply the GeneratePress layout on the menu in the widget. However, I think that the Pro version can be configured in such a way that its appearance is similar as my GeneratePress configuration.

If it is complex to imitate this plugin with GeneratePress, then I can purchase the Wpdevart vertical menu Pro version.

I can provide the url of my site (https://medische-ethiek.nl/), but all testing on vertical menus is done on my test system (local Wamp64).

Frans

[Tom]

You can tell the Secondary Nav to show up in your sidebar by going to Customize > Layout > Secondary Navigation and changing the location setting.

Let me know if that does it or not 🙂

[Frans]

This is a great idea ! It works: the secondary menu appears in the left sidebar.

The problem now is that the submenu appears right to the main menu items. I would prefer to let them appear below the main menu item and pushing down the other main menu items: this is what, similarly, happens with the primary dropdown menu on mobile phones. All items (main and subitems) then remain within the left sidebar area.

Can it be arranged with additional css ?

Frans

[Tom]

Give this a shot:

.dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li:hover ul, 
.dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li.sfHover > ul {
    left: 0;
    width: 100%;
    position: relative;
}

Let me know 🙂

[Frans]

Thanks, it works ! I added some layout and a li:active for clicking and keeping the submenu in place.

.dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li:hover ul, 
.dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li.sfHover > ul {
    left: 0;
    width: 100%;
    position: relative;
	  padding-left: 20px;
	  padding-bottom: 14px;
	  font-size: 16px;
	  box-shadow: 0px 0px 0px 0px;
}
.dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li:active ul, 
.dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li.sfHover > ul {
    left: 0;
    width: 100%;
    position: relative;
	  padding-left: 20px;
	  font-size: 16px;
	  box-shadow: 0px 0px 0px 0px;
}

I don’t know whether my css-code can be made more “lean”

Frans

[Tom]

Looks good to me! 🙂

[Frans]

I have three additional questions:

1) my secondary navigation menu is now in the left sidebar. There are 4 entries at the highest level, 2 have a submenu. If I click on the first level with a submenu, it opens and remains opened; if I, thereafter, click on the second level with a submenu, the second submenu behaves similarly. However, at that moment the first submenu closes (when the second opens). In the mobile version, both submenus remain opened. Can this also be configured in the desktop version ?

2) On mobile, my left sidebar (and thus the second navigation menu) appears below the page content. Can it be configured that the left sidebar appears above the page title and content ?

3) The title of the secondary navigation menu in the left sidebar (“menu”) is centered. Can it be configured in such a way that the menu text is at the left (I cannot find the class that configures this layout).

Thanks !

Frans
Example

[Tom]

Hi there,

1. As of right now, this isn’t possible without custom javascript, unfortunately. The only reason it stays open until something else is clicked is that it’s in “focus” for accessibility reasons.

2. This might help: https://generatepress.com/forums/topic/secondary-menu-not-responding-on-mobile-cant-move-menu-location/#post-847578

3. Try this CSS:

.secondary-navigation .menu-toggle {
    text-align: left;
}

[Frans]

Thanks ! 2 comments and 1 question left:

Ad 1: I understand.
Ad 2: It works, but the secondary navigation menu is now under the main menu and above the custom image of the Generatepress Page Header. Could it be placed under the custom image of the Page Header and above the content ?
Ad 3: It works !

Frans

[Tom]

Try this as your Hook content:

<script>
    var target, nav, clone;
    nav = document.getElementById( 'secondary-navigation' );
    if ( nav ) {
        clone = nav.cloneNode( true );
        clone.className += ' sidebar-nav-mobile';
        clone.setAttribute( 'aria-label', 'Mobile Menu' );
        target = document.querySelector( '.page-hero' );
        if ( target ) {
            target.insertAdjacentHTML( 'afterend', clone.outerHTML );
        } else {
            document.body.insertAdjacentHTML( 'afterbegin', clone.outerHTML )
        }
    }
</script>

Let me know 🙂

[Frans]

Thanks it works, but – sorry for that – 2 questions:

1. With this script, the menu appears under the custom image of the page header, but does not disappear from the original (bottom) location. Should it be swtiched off in the customizer or do I need additional script ?

2. With what css class can I style this menu on mobile ? I tried menu-mobile, but then the main menu changes on mobile as well. Can I use another class ?

Thanks!

Frans

[Tom]

1. Try this CSS:

@media (max-width: 768px) {
    .gen-sidebar-secondary-nav {
        display: none;
    }
}

2. You can do this:

@media (max-width: 768px) {
    .secondary-navigation {...}
}

Hope this helps 🙂

[Frans]

Thanks ! Questions answered, problems solved.

Frans

[Author]

Posts