don't show secondary menu on mobile

Site URL: http://www.gardenclubofoldgreenwich.org

I have css to suppress the secondary menu and I have code for it to appear on the one page where I want it.

In the custom css page in the design section, I have 

  nav.Header-nav.Header-nav--secondary {
    display: none;
}

and on the page, I have this header code injection

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

I only want the secondary menu to show on a desktop or tablet (no secondary menu on the phone.) I tried making the secondary nav font white on mobile, but it doesn't really work. Is there a way I can do it? I don't need it to show up on a tablet, but I would prefer if it was only blocked on the phone.

10 minutes ago, charbar said:

Site URL: http://www.gardenclubofoldgreenwich.org

I have css to suppress the secondary menu and I have code for it to appear on the one page where I want it.

In the custom css page in the design section, I have 

  nav.Header-nav.Header-nav--secondary {
    display: none;
}

and on the page, I have this header code injection

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

I only want the secondary menu to show on a desktop or tablet (no secondary menu on the phone.) I tried making the secondary nav font white on mobile, but it doesn't really work. Is there a way I can do it? I don't need it to show up on a tablet, but I would prefer if it was only blocked on the phone.

 

You need to prevent clients clicking on sub-nav on mobile, don't you?

I need to do that too! What I am working on now is to hide the secondary nav (which is only visible when you click "members" on the primary navigation) on the phone.  I have a secondary menu that opens when you click on "members" that doesn't have anything on it that people will need to see when they are on their phone, so I only want it to show up on the computer. Many of the members are older and computer-phobic so I want it to be simpler.

1 hour ago, charbar said:

I need to do that too! What I am working on now is to hide the secondary nav (which is only visible when you click "members" on the primary navigation) on the phone.  I have a secondary menu that opens when you click on "members" that doesn't have anything on it that people will need to see when they are on their phone, so I only want it to show up on the computer. Many of the members are older and computer-phobic so I want it to be simpler.

 

Try adding to Home > Design > Custom Css to hide secondary nav on tablet

@media only screen and (max-width: 1024px) {
  .Header-nav--secondary {
    display: none !important;
  }
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

I tried that and it suppresses the secondary nav on everything except the phone. I want it to show up on the members page everywhere except on the phone. Would changing it to min-width work?

I tried min-width and it didn't work.

So I am back to using this code in the custom css portion that suppresses the secondary nav on a computer or a tablet, but not the phone.

  nav.Header-nav.Header-nav--secondary {
    display: none;
}

and I have this code in the page header of the one page where I want the secondary navigation: 

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

and it works on both the computer and tablet. 

The easy solution is to make the secondary nav text white on mobile. That looks fine but someone may accidently hit one of the secondary menu items.

To sum up, your point is:

- desktop & tablet: display second nav

- mobile (breakpoint <=767p): hide second nav

Do i miss anything?

Right - the second nav is only visible on the Members page and only if the person is not viewing from a phone

35 minutes ago, charbar said:

Right - the second nav is only visible on the Members page and only if the person is not viewing from a phone

 

You can try replacing the previous code with the following one

.Mobile-overlay-nav--secondary {
  display: none;
}

Hope that it can help

Support me by pressing 👍 if this useful for you

Great! It works great. Thanks!