[Resolved] Keep submenu items visible (vertical navigation)

[heliotrope]

Hello,
We used to following css to keep our menu open. It works, But when we navigate to a page, the menu is closing again.
Here is category example page: http://www.mayelle.com/wpressmayelle/professionnel/ (menu remains open, it works)
And here , inside a project, it should remain open, but it doeesn’t work : http://www.mayelle.com/wpressmayelle/projets/pharmacie-centre-bruay-escaut-2-4-2/

Any solution ?

.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;
}

[Leo]

Hi there,

It doesn’t look like “projets” page have a direct relationship with the menu items.

In order for the submenu items to be visible under menu item “professionnel”, it needs to have a relationship.

You can see professionnel in this URL: http://www.mayelle.com/wpressmayelle/professionnel/ which is why it works.

But this one does not: http://www.mayelle.com/wpressmayelle/projets/pharmacie-centre-bruay-escaut-2-4-2/

[heliotrope]

Hi Leo, thanks a lot for the infos.
Indeed, you are right.
“Professionnel” is a page,
“Pharmacie” is a sub-page of “Professionnel”
and this page is a “project” page (made with live composer): http://www.mayelle.com/wpressmayelle/projets/pharmacie-centre-bruay-escaut-2-4-2/

The problem is that we tested with only pages and sub-pages:
—professionnel
—–pharmacie
——test_sub_pharma
http://www.mayelle.com/wpressmayelle/professionnel/pharmacie/test_sub_pharma/
…And the menu is still closing when reaching “test_sub_pharma”.

Maybe something is missing in the Css?

[Leo]

Can you try this CSS:

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

}

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

[heliotrope]

Hi Leo,
Thanks a lot…
We tried your Css, but unfortunately, it makes no changes..
The menu still remains closed when reaching this page : http://www.mayelle.com/wpressmayelle/projets/pharmacie-centre-bruay-escaut-2-4-2/

[Tom]

The issue goes back to what Leo mentioned – there’s no relationship between that page and the menu item.

You could try creating the relationship with a function like this:

add_filter( 'nav_menu_css_class', 'tu_add_cpt_menu_ancestor', 10, 2 );
function tu_add_cpt_menu_ancestor( $classes = array(), $menu_item = false ) {
	if ( $menu_item->title == 'professional' && 'dslc_projects'== get_post_type() ) {
		$classes[] = 'current-menu-ancestor';
	}

	return $classes;
}

[heliotrope]

Hi Tom,
It took us some time to make it work, but it works perfectly !
Thanks a lot ! 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts