How do I change the Mobile Navigation Bar so it isn't transparent and floating above my page-content

Store Design
1

Hello everyone,

I have a problem. When I’m viewing my shop in desktop view the navigation bar is fine. However, in mobile view, a transparent version of the navigation bar seems to be employed and this navigation bar covers the main page content rather than being above the main page content.

How can I fix this?

mobile homepage
mobile homepage619×554 141 KB

desktop homepage
desktop homepage1650×745 140 KB

Site: veganflex.co.uk

pw: peothu

2

hii, @VFlex
Paste this code on top of the theme.scss file.
If the code has not worked then paste this code on top of the timber.scss file.

@media (max-width: 767px){
.sc-eKYRIR.llyViG.pf-3_ {
    margin-top: 15% !important;
}
}

Thank You

1 Like
3

Hi @VFlex ,

In the mobile version, your header did not have a height.

Please duplicate your theme before doing this so you can have something to go back to.

Open your theme, click actions, then edit code.

Find the theme.scss file under the Asset folder and add the code below

#shopify-section-header > div > div.header-container.drawer__header-container > div {

height: 100px !important;

}

2 Likes
4

Thank you very much! I tried this first and it worked!