Site logo

Archived topic

Keep submenu items visible (vertical navigation)

7 replies · Started by heliotrope on May 22, 2018

Viewing posts 1–8 of 8

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

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?

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

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

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

You're welcome :)

This archived topic is closed to new replies.