Shapely theme - Fixed (sticky) menu on mobile

Shapely
1

Hi there,
I have started to build a site using your wonderful theme Shapely. But when a visitor uses a mobile or tablet, I want the top nav menu to be fixed as the user scrolls down the page. Is there some CSS code for this?

For info, my site URL is http://theellistongroup.com

Many thanks,
Sean

2

Hey there,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*fixed mobile menu*/
@media (max-width: 768px){
	.nav-container {
    position: fixed;
}
}

Best regards,
Support.

3

Many thanks for the speedy response. It kind of works. The menu banner goes transparent when scrolled which looks a bit odd. How can this be made to be a solid white?

Also, the menu seems to scroll behind the header image on mobile. Is there a way to fix this too?

Finally, when checking this in ‘Tablet’ view, the menu is only half width - see attached.
Thanks again,
Sean

4

Hi there again,
Apologies. The attachment didn’t appear to upload properly. I have made it smaller and reattached. If you can let me know the best way forward, that would be great. - see details in my last post above.

Oh… and I have just seen that the hamburger menu on tablet and mobile no longer works! :frowning: Any ideas

Thanks,
Sean