[Resolved] Keep dropdown submenu items visible

[Ingrid]

Hi,

I use the primary navigation in my right-sidebar and I would like the submenu-items of the active parent menu to remain visible / unfolded. Is this possible?

Thanks in advance for your help!

[Tom]

Hi there,

You could try something like this:

.sidebar .main-navigation .main-nav .sub-menu {
    opacity: 1 !important;
    display: block !important;
    left: auto;
    right: auto !important;
    position: relative;
    width: 100%;
    clear: both !important;
    top: auto;
    float: none;
}

.sidebar .dropdown-menu-toggle {
    display: none;
}

[Ingrid]

Thanks for your fast reply!

This works great! But I would love to keep the option to use the dropdown-function when none of the sub-items of a specific main-menu item is active. In the ideal world the menu should act as follows;
* When the main menu item, or one of its submenu-items is active > display all the submenu-items as block
* When none of the submenu-items or the main menu-item is active > display only the main-menu item with dropdown arrow.

Somehow the CSS you provided should be linked to the same category the ‘background current’ for menu-items is, is this possible?

[Tom]

Hmm, maybe give this a shot:

.sidebar .main-navigation .main-nav .current-menu-item .sub-menu, 
.sidebar .main-navigation .main-nav .current-menu-ancestor .sub-menu {
    opacity: 1;
    left: auto;
    right: auto !important;
    position: relative;
    width: 100%;
    clear: both !important;
    top: auto;
    float: none;
    visibility: visible;
    pointer-events: auto;
    height: auto;
    display: block;
}

.sidebar .current-menu-item .dropdown-menu-toggle, 
.sidebar .current-menu-ancestor .dropdown-menu-toggle {
    display: none;
}

[Ingrid]

Unfortunately that doesn’t work when one of the sub-menu items is active / current.

I have another problem that also occurs without any extra CSS. The main / parent menu-item is not clickable from the sidebar menu. When I hover over it, it shows the correct url in the bottom left corner of my screen, but when I click it, nothing happens. Only the sub-menu items work when I click on them. Any idea how to solve that?

I can get over not being able to hide the submenu-items of inactive parents :-), but I do need to be able to use the main/parent menu-item from the sidebar menu.

Thanks again for your help!

[Tom]

I just adjusted the CSS above for child pages: https://generatepress.com/forums/topic/keep-dropdown-submenu-items-visible/#post-258688

However, I can’t replicate the issue with not being able to click the parent item. Any chance I can see your site?

[Ingrid]

Menu works great!! Just the way I wanted! Thank you so much!

It’s still in progress, but you can see it at; http://nieuw.yalyn.com. As soon as I remove the sub-items the parent item is clickable (see ‘naslagwerk’), but when I add sub-items the parent doesn’t respond anymore…

[Tom]

Ah, you’re using the Click – Menu Item option which disables the parent link. More info here: https://docs.generatepress.com/article/navigation-dropdown/

[Ingrid]

Solved! Thanks for the great support!

[Tom]

You’re welcome 🙂

[Cris]

Hi
That is great! but my problem is that I will put many links and I would need only to open the corresponding submenu. And also activate the main menus where it is active. I do not know if I explain myself well because my English is very poor.

[Leo]

Hi there,

Any chance you can open a new topic and provide an example of what you are looking for?

Thanks!

[Cris]

But my question is about this topic. I did what Tom said to make the active submenu visible. This leaves all submenus open within the main menu and prevents it from closing. You can see it here in the sidebar: http://bit.ly/2yrHR5e

In that menu I still have to add a lot of submenus, so that all the submenus would be open and I just want the asset to open.

I hope I have explained myself better.

[Leo]

Hmm I don’t see a sidebar on that page?

[Cris]

Sorry, try now

[Author]

Posts