I would like for the logo, search icon and menu icon (header_main) in the mobile version to be sticky ONLY.
The other extra elements, phone number, secondary menu should scroll with content.
I am using the code below right now but not exactly what I need. please help.
@media only screen and (max-width:767px) {
.responsive #top #wrap_all #header {
position: fixed !important;
}
.responsive #top #main {
padding-top: 150px !important;
}
}
Hey epaz,
Please remove that code and add the code below:
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header_main {
padding-top: 61px;
}
.responsive #top #wrap_all #header_meta {
position: fixed;
width: 100%;
}
.responsive #top #wrap_all #header {
position: static !important;
}
.responsive #top #main {
padding-top: 0px !important;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
Hello Victoria, thank you for your quick response, this works, yes, but maybe I didn´t explain myself correctly.
With your changes, the top bar (phone number, social media and secondary menu) is fixed and the main menu (logo, search icon and menu icon) scrolls, I was hopiong for the exact opposite. I wanted my logo and menu to stick and the phone number et all to scroll.
Thank you.
Hello Victoria, also, the css code that you provided makes the menu go behind all the other elements, it should always go in front.
ty.
Hi,
Try adding z-index with high value to make it always go in front. Hope this helps :)
Best regards,
Nikko