Jump to content

don't show secondary menu on mobile

Recommended Posts

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.

 

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

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?

image.png.fc0ebc4ec22f7f13c38c64cef6a6124a.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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.

 

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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.

Link to comment

To sum up, your point is:

- desktop & tablet: display second nav

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

Do i miss anything?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.