Hide navigation on mobile site

Site URL: http://www.scarycanarypub.com

My site has a cover page that has the options for two different stores. I was able to hide the secondary navigation on the primary site and vise versa. But on the mobile site both navigations still show. How can I disable them as I did for the regular site?

I'm not seeing any menus on mobile.

Did you solve the issue?

After you select one of the buttons.

Try the following.

.Mobile-bar-menu {

  display : none;

  }

Let us know how it goes.

The Copperfield button goes to a webpage that uses the secondary navigation with primary navigation hidden.

The Tomball button goes to a webpage that uses the secondary navigation with primary navigation hidden.

On the mobile site it shows both navigations when each button selected. I'm looking for a way to hide one of them as I did on the desktop site.

I did it for the desktop by inserting page settings>advanced

<style>
  nav.Header-nav.Header-nav--secondary {
    display: none;
</style>

Ah. I think I see now.

I think these are the rulesets you are interested in.

<style>

  .Mobile-overlay-nav--primary {
  
    display : none;
    
    }
    
  </style>

<style>

  .Mobile-overlay-nav--secondary {
  
    display : none;
    
    }
    
  </style>

This is for v7.0 using the Brine template family.

Let us know how it goes.

Thats it! Thank You!!