Archived topic
Hook to insert slideout menu widget to also display in the mobile menu?
18 replies · Started by Jordan on March 27, 2019
I am able to position div.navigation-widget-area to appear at the bottom by changing the padding-top to a larger number or percentage. However, the second of the first level menu items has a submenu and when this ul.sub-menu has the class .toggled-on, div.navigation-widget-area does not adjust it's position to this sub menu. It appears above the menu in the wrong location until the submenu is closed.
Hi there,
when using the sticky nav the Menu UL is absolutely positioned, which is why the widget sits over the menu. Not sure of the side effects but try this CSS:
.both-sticky-menu .main-navigation:not(#mobile-header).toggled .main-nav>ul {
position: static !important;
}
And then you can remove the margin top you have added to the widget.
David, thank you sir! That did the trick. Here's the final CSS code I needed to use to get this to work with the new 'generate_after_primary_menu' hook. I had to adjust the close toggle positioning to suit my needs.
.navigation-widget-area {
display: none;
}
.both-sticky-menu .main-navigation:not(#mobile-header).toggled .main-nav>ul {
position: static !important;
}
.menu-logo .main-navigation:not(.mobile-header-navigation) .menu-toggle{
text-align:right;
right: 0;
position: absolute;
}
@media (max-width: 768px) {
.toggled .navigation-widget-area {
display: block;
order: 100;
text-align: center;
z-index: 999;
}
.toggled .inside-navigation {
display: flex;
flex-direction: column;
}
}
Glad we could be of help - and thank you for sharing your solution