[Resolved] Additional menu in sidebar active item opened

[Luizik]

Hello, developers!

I have a question about additional menu in sidebar active item. I want the menu no to collapse and stay open when i am on a child page.

If a client is on sub page

– i am on this page and the menu should look the same way – should be opened (now it closes when i move my mouse away)

[David]

Hi there,

try this CSS:

.sidebar .secondary-navigation .main-nav .current-menu-item .sub-menu, 
.sidebar .secondary-navigation .main-nav .current-menu-ancestor .sub-menu,
.sidebar .secondary-navigation .main-nav .current-page-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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Luizik]

Thank you very much!

It works perfect!))

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jernej]

Hey there,

I used the same code you David provided.

I would like to know if this always open sub menu can be fixed to the opened location?
So if anybody wants to click and hover to other item of this always open submenu, doesn’t open to the right like the submenu naturally does (selected open right in customizer).

Check short video explaining what I mean:
https://share.getcloudapp.com/Z4uAA4vY

thank you!

[Ying]

Try this:

.dropdown-hover.left-sidebar .widget-area .secondary-navigation:not(.toggled) ul li:hover ul {
    position: relative;
    left: auto;
}

If it doesn’t work, can you open a new topic and link us to your site where we can see the sidebar menu?

Let me know 🙂

[Jernej]

Hi Ying!

Thank you for help. It works exactly as I need 🙂

[Ying]

You are welcome 🙂

[Jernej]

In reply to this topic I would like to know if despite all the above code added to CSS, there is an option that current submenu is visible on page load but “current” submenu collapse if somebody click on different menu element (which expand submenu of that other menu element). Just like it works with other menu elements that are not current.

Here is the video:
https://share.getcloudapp.com/xQux7wXY

Thank you for your help!
Jernej

[Ying]

Can you link me to the site so I can have a look to see the possibilities?

[Jernej]

https://art.jernejkriznar.com/amedeo-modigliani/

[Ying]

Try this add CSS:

.widget-area .secondary-navigation li[class*="current-menu-"].sfHover > ul {
    display: none !important;
}

[Author]

Posts