Archived topic
Mobile: How to make only hamburger menu sticky?
1 reply · Started by Sascha on August 25, 2021
Hi
on our site we need to make the hamburger icon sticky on mobile screens.
I have tried to apply these codes, but had no luck:
/* 720 and smaller screen sizes */
@media (max-width:720){
/* Mobile menu control wrapper */
#mobile-menu-control-wrapper{
position:sticky;
}
/* Menu toggle */
#mobile-menu-control-wrapper .menu-toggle{
position:sticky;
}
/* Icon menu bars */
#mobile-menu-control-wrapper .menu-toggle .icon-menu-bars{
position:sticky;
}
}
Could you please provide the correct CSS for this purpose?
I'm still beginner-level regarding CSS …
Thank you in advance and kind regards,
Sascha
Hi there,
This is a bit tricky to do because you'll have to make the navigation dropdown follow with it.
While it's best to just use the sticky feature and make the whole header follow the sticky, you can try this:
@media (max-width:768px){
button.menu-toggle {
position: fixed;
top: 20px;
right: 10px;
}
nav#site-navigation {
position: fixed;
top: 70px;
width: 100%;
background-color: white;
}
}But I recommend using off-canvas menu for this so you don't have to add the 2nd part of the CSS (nav#site-navigation).
