Archived topic
No menu toogle Icon (Hamburger Menu) when using sticky primary navigation
4 replies · Started by Ender on May 10, 2019
I use this code on specific pages to have a sticky primary navigation:
.page-id-2943 #site-navigation, .page-id-1531 #site-navigation {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
opacity: 0.95;
}
.page-id-2943 #mobile-header, .page-id-1531 #mobile-header {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
opacity: 0.95;
}It works for Desktop and Mobile. But on the mobile version the menu Toogle Icon (Hamburger Menu) disappears. What I make false?
Hi there,
Any reasons why you don't want to use the built-in sticky navigation?
https://docs.generatepress.com/article/sticky-navigation/
If you only want it on one page, you can use this filter:
https://docs.generatepress.com/article/option_generate_menu_plus_settings/#sticky_menu
https://docs.generatepress.com/article/option_generate_menu_plus_settings/#example
Let me know :)
Yes, I am familiar with this function. However, it does not change the fact that the "Close" icon is not visible in the mobile view.
In the desktop view there are no problems. Only problems, when i am in the responsive mode: i can click to the burger menu, but the close button is not visible.
I think i found now a solution with z-index
.page-id-2943 #mobile-header, .page-id-1531 #mobile-header {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
opacity: 0.95;
z-index: 9999999999999999999999;
}Hope this is html-valid :)
If you use the default sticky navigation, the close button should definitely be visible.
Glad you found a solution anyways :)
