Jump to content

How to hide specific navigation items on 7.0?

Recommended Posts

Site URL: https://www.musaparadisiaca.net/about

Hi there. I am aware that this is a common issue, even though, I couldn't find any CSS solution to it concerning version 7.0. I know the solution for version 7.1 but, that version comes with different issues concerning customisation. Could someone please help me with a CSS solution for hiding specific navigation items with the purpose of creating a bilingual website? It is absurd that this option is no longer available on styles from scratch. Thanks a lot for your time! 

Edited by MiguelFerrao
Link to comment

This solution is perfect for hiding items permanently. Although, in my case, I am searching for an option to hide specific items on specific pages. I am building the navigation bar with all the links for the two different languages, as so, I would need to hide the links on language A when opening pages on language B, as so on. Could you please help with that too?

Link to comment

I have used the code you kindly provided to make some test. And it worked, the nav items are now only shown when they are needed. My only remaining issue is the blank space the hidden items seem to occupy in the nav bar, pushing all the visible items to the left. This creates justification problems to the nav bar as a whole. Do you have any idea on how to solve this? Thanks a lot in advance.

Link to comment
On 3/2/2021 at 7:18 PM, MiguelFerrao said:

Dear @tuanphan,

It seems, after all, that all the hidden items are always there occupying blank space and forcing the visible items to the left or right, depending on the order of the main navigation items' insertion. 

Hi. Do you still need help on this?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
22 hours ago, MiguelFerrao said:

Hi @tuanphan! I couldn't find any solution to 7.0 version, unfortunately.

You can target :nth-child

with when item, use this new code

nav.site-navigation>div:nth-child(4) {
    display: none !important;
}
nav.mobile-primary-nav-links>div:nth-child(4) {
    display: none;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.