Make menu sticky on mobile

Sanjeev,

This makes it sticky

@media only screen and (max-width: 768px){
#header {
position: fixed;
}
}

  1. however the header only goes 2/3 of the way over - any ideas how we can fix this. This is my last (piece) to do for the site.

See screenshot.

  1. When you turn the phone to landscape (long ways- cant screenshot) it extends all the way and then also adds in the cart icon and search that i removed in CSS with your other suggestions.

. not selling on the site so no cart icon or search wanted or needed

Thanks for any help on this

Hello Stuart,

Can you please swap your CSS with the one below and let me know how this goes?

#header {
position: fixed;
width: 100%;
}

Thank you

Sanjeev that worked great for the smartphone in portrait mode!!! Thank you

Any ideas or other css on removing the cart and search icons that still show in landscape mode when I have this css in the customizer?

.navbar-nav:last-child {
display: none !important;
}
@media only screen and (max-width: 769px) {
.search-form {
display: none;
}
}

Hello,

For showing / hiding cart, please follow this article: https://www.support.waituk.com/hc/en-us/articles/115001358345-Remove-Account-Cart-Search-Language-Icons-from-Header

And you can target different devices with your example above. If you need more help with the icons on header, please create another post with more details.

Thank you