Tagged: sticky mobile menu
Hi
I would like to make the mobile menu sticky, please. I have tried a few things but none of them have worked.
Thanks
Hey info224,
Try adding this css code in Quick CSS (located in Enfold > General Styling):
@media only screen and (max-width:767px) {
.responsive #top #wrap_all #header {
position: fixed !important;
}
}
Hope this helps :)
Best regards,
Nikko
Hi
Thanks for this it sort of works.
However, on the home page the padding is very large at the bottom of the menu and some pages it does not work please see below for an example.
Many thanks
Hi,
I checked those pages mentioned and it worked on my end, however I do see large margins in the footer, you can reduce this by replacing the code I gave with this:
@media only screen and (max-width:767px) {
.responsive #top #wrap_all #header {
position: fixed !important;
}
#footer .flex_column.av_one_fourth {
margin-bottom: 0 !important;
}
#footer .flex_column.av_one_fourth .widget {
margin: 0 0 16px;
}
}
Hope this helps :)
Best regards,
Nikko
Prefect it works thanks so much
Hi,
Glad that we could help. Let us know if you need further assistance or if we can close the thread :)
Best regards,
Nikko
Hi Nikko,
How are you?
Your code below sticks header and also top menu on mobiles.
Can I stick only the header and not top menu?
@media only screen and (max-width:767px) {
.responsive #top #wrap_all #header {
position: fixed !important;
}
}
Thank you in advance,
Best Regards,
Nick
Hi Nick,
The top menu is in the header, so it gets stuck with the header.
Best regards,
Victoria
Hi Victoria,
Thank You for your quick response.
Best regards,
Nick