How to Make the Mobile Navigation Display On Top of the Header Image
Within several different Squarespace templates you have the option to have the main navigation appear overtop of the banner image.
However, when the screen is on mobile, the navigation has a white background. But what do you do if you want the mobile navigation to also be on top of the header image?
If you have a template that is within the Brine Family, I have not found a way to do this within the Site Styles. There is an option to make the mobile bar transparent, but the header image is below the navigation bar, so there is nothing to see underneath the mobile navigation bar.
If this is a feature you really want to have, my first suggestion is to switch to a template that has this feature built in. However, if you are already settled into a template that does not have this option, the following video shows you a work around. I have provided the code used in the video below.
The following code is used in the video.
@media only screen and (max-width: 640px) { .Mobile-bar--top { background: hsla(0,0,0,0) !important; position: relative; z-index: 1 !important; } .Index-page--has-image:first-of-type { margin-top: -100px !important; position: relative; z-index: 0 !important; } .sqs-block-content:first-of-type { margin-top: 50px !important; position: relative; z-index: 0 !important; } }
Remember that this code only works for index pages that have a banner image in the first section. You may also need to alter the code depending on the template you are using. If you are having trouble using this code feel free to contact me here.
