- This topic has 3 replies, 2 voices, and was last updated 2 years, 12 months ago by David.
-
AuthorPosts
-
April 27, 2021 at 1:16 am #1750412Daniel
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>
April 27, 2021 at 2:42 am #1750491DavidStaffCustomer SupportHi there,
can you share a link to your site so i can take a look at a possible CSS method ?
April 27, 2021 at 12:43 pm #1751416DanielThanks 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>
April 28, 2021 at 1:43 am #1752372DavidStaffCustomer SupportGlad to hear you got it resolved
-
AuthorPosts
- You must be logged in to reply to this topic.