charbar Posted December 9, 2021 Posted December 9, 2021 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.
Beyondspace Posted December 9, 2021 Posted December 9, 2021 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? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
charbar Posted December 9, 2021 Author Posted December 9, 2021 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.
Beyondspace Posted December 9, 2021 Posted December 9, 2021 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
charbar Posted December 9, 2021 Author Posted December 9, 2021 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?
charbar Posted December 9, 2021 Author Posted December 9, 2021 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.
Beyondspace Posted December 10, 2021 Posted December 10, 2021 To sum up, your point is: - desktop & tablet: display second nav - mobile (breakpoint <=767p): hide second nav Do i miss anything? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
charbar Posted December 10, 2021 Author Posted December 10, 2021 Right - the second nav is only visible on the Members page and only if the person is not viewing from a phone
Beyondspace Posted December 10, 2021 Posted December 10, 2021 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
Recommended Posts
Archived
This topic is now archived and is closed to further replies.