Archived topic
Keep submenu items visible (vertical navigation)
7 replies · Started by heliotrope on May 22, 2018
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 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/
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;
}
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/
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 :)