Mobile version displaying both hamburger and normal menu, affects non-chromium browsers.

[DBAdam]

Our mobile site was having some display issues on non-Chromium mobile browsers where the home page would display the full height of the page, regardless of the users screen width. 

I was able to resolve that issue by adding 'initial-scale=1' to the <meta name = "viewport" content="width=device-width"/> line on our theme.liquid sheet.

Now the only problem that remains is that we have our desktop nav always displaying on the home page when loaded in those same browsers:

I've tested on Opera and Chrome and the mobile version only displays the hamburger menu there:

(Desktop Version where hamburger menu is gone, and normal menu appears properly)

What can I do to stop the desktop nav from appearing on all mobile versions of our website instead of just the Chrome-based browsers?

Website Link 

[JasmeetVT14313 · Accepted solution]

Hi @DBAdam 
Try adding below code to end of theme.css file

@media screen and (max-width:1023px){
nav.site-navigation {
    display: none;
}
}

If you require further help, please don’t hesitate to reach out.
If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

[DBAdam]

That got rid of the menu!

However now the mobile site has a blank block between the search and our rotating banner.

When I check out the page source I can manage to turn off that block by clicking the checkmark next to the highlighted text, but I can't find any way to overwrite that !important tag in my theme code.

Do you know of any resolution to this?

Thank you.

[JasmeetVT14313]

Hi @DBAdam 

The white space does not appear on my end. Let me know if it still persists.

As the above reply has solved your issue. It would be great if you can mark it as a solution. Thanks

[DBAdam]

You are right, for some reason today the white space is gone! Thank you for your help!