Archived topic
Secondary menu (on click?) with expanded current menu item
6 replies · Started by Pavel on September 6, 2021
Hi!
In recent days I have been solving the problem with the secondary menu. I want the primary menu "on hover", but the secondary menu "on click" - because I could not solve this problem, I found at least a code that moves the items at the secondary menu down (not right) on "hover", which was friendlier for me.
Now (and this is the problem), I need not only when "hover", but also when being on a child-item site in the secondary menu, its entire parent item remains expanded. I'm sending a link in a private window. When you go (hover) to a secondary menu, such as item "Sport", the menu will expand down on hover correctly - that's OK. But I need that after clicking, for example, on the child item "Voltižní oddíl" - and stay on this site, the whole parent item "Sport" in secondary menu should be expanded (and not only on hover).
I hope you understand my problem. Thank you so much for your help!
Hi there,
tough one that... might be simpler to have all sub menus open on click, and then we look at some CSS to make the Primary nav items open on hover.... not sure though but that would be my approach.
OK, that sounds good. So now I made a change - all my menus open on click (click on arrow). So what should I do, if I want my primary nav items open on hover? Secondary navigation now works as I wanted, but we need to fix the primary menu...
Now I notice, that when I am on the child page in secondary menu ("Voltižní oddíl"), the parent item "Sport" is not expanded... Is there any possibility, how the parent item stays expanded (after clicking on the child page...)?
Try this CSS:
@media(min-width: 769px) {
.main-navigation ul > li:hover .sub-menu {
display: block;
left: auto;
right: auto;
opacity: 1;
visibility: visible;
pointer-events: auto;
height: auto;
overflow: visible;
}
.menu-item-has-children .dropdown-menu-toggle {
display: none !important;
}
.dropdown-click .widget-area .secondary-navigation li.current_page_item ul,
.dropdown-click .widget-area .secondary-navigation li.current_page_parent ul {
position: relative;
right: 0;
left: auto;
opacity: 1;
visibility: visible;
pointer-events: auto;
height: auto;
overflow: visible;
}
}I deleted the "display:block" from the first part, because it broke my mega menu, and I added z-index to both of them, because the secondary menu overlapped the primary menu on hover... The dropdown-menu-toggle class I want to display, so I deleted the part about that. Thank you so much for your help!!! This is the final code, which I used...
.main-navigation ul > li:hover .sub-menu {
left: auto;
right: auto;
opacity: 1;
visibility: visible;
pointer-events: auto;
height: auto;
overflow: visible;
z-index: 1;
}
.dropdown-click .widget-area .secondary-navigation li.current_page_item ul,
.dropdown-click .widget-area .secondary-navigation li.current_page_parent ul {
position: relative;
right: 0;
left: auto;
opacity: 1;
visibility: visible;
pointer-events: auto;
height: auto;
overflow: visible;
z-index: 0;
}Thats great ! Glad ton be of help. Thanks for sharing your final code :)
