Archived topic
Expand sub menu
3 replies · Started by Daniel on April 27, 2021
Hello
So this is my problem: I am using the expandable option for the menu. However, if my current page is either Team/subitem1/subitem2, I want the submenu items subitem1/subitem2 to be shown all the time. If I am on any other page, the menu should function as usual.
I have found an approach through javascript footer hook:
<script>
jQuery( document ).ready( function($) {
$( '.main-navigation .current-menu-item' ).addClass( 'sfHover' );
$( '.main-navigation .current-menu-item .sub-menu' ).addClass( 'toggled-on' );
$( '.main-navigation .current_page_parent' ).addClass( 'sfHover' );
$( '.main-navigation .current_page_parent .sub-menu' ).addClass( 'toggled-on' );
} );
<script>
<code></code>It works, however there is a problem: Clicking anywhere in the page collapses the submenu again.
I have found a second approach through css (from 2017), but it does not seem to be working anymore..
https://generatepress.com/forums/topic/navigation-dropdown-click-menu-item-is-it-possible-to-change-the-bahavior/
<style>
.main-navigation .main-nav li.current-menu-item .sub-menu,
.main-navigation .main-nav li.current-menu-ancestor .sub-menu {
left: auto !important;
right: auto !important;
width: 100%;
pointer-events: auto;
height: auto;
opacity: 1;
display: block !important;
}
.dropdown-hover .main-navigation:not(.toggled) ul li:hover>ul,
.dropdown-hover .main-navigation:not(.toggled) ul li.sfHover>ul {
left: 0px !important;
}
</style>
Hi there,
can you share a link to your site so i can take a look at a possible CSS method ?
Thanks David for offering help. Unfortunately, my IT department was not able to open access to the webserver from www network. As you pointed me in the right direction (css aproach), I was able to realize my ideas myself. Here is the code:
<style>
.dropdown-click .main-navigation .current-menu-item ul,
.dropdown-click .main-navigation .current_page_parent ul {
display: block !important;
left: 0 !important;
right: 0 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
height: auto !important;
overflow: visible !important;
position: relative !important;
}
.dropdown-click .main-navigation .current-menu-item span.dropdown-menu-toggle,
.dropdown-click .main-navigation .current_page_parent span.dropdown-menu-toggle {
visibility: hidden !important;
}
</style>Glad to hear you got it resolved
