Remove A Link From Your Main Nav On A Page In Squarespace 7.0

Okay, so you want to remove a link from just one page on Squarespace, eh? We'll that’s just great. Here’s how we do it.

Let’s start from the top. Every Website is made of HTML elements - this is the core of the website. The HTML is where we structure the content of our website. We then combine CSS code with the HTML for some styling 🕺🏼. We do this by selecting something in the HTML that has a specific attribute associated with it.

In our case, we want to apply a style (removing an element with CSS is a way of styling it) to one of the main nav items. There are a bunch of different types of selectors that I won’t go into now, but the type of selector we’ll be using today is something called a pseudo-selector.

Pseudo Classes

Selectors are great, they allow us to make global changes on our website to a bunch of elements all at once, instead of individually, saving us a bunch of time.

Problem is, if a specific element doesn’t have a unique attribute that we can select, there isn’t a way to style just that one element. This is where pseudo-selectors come in.

Pseudo-selectors allow you to select specific elements within your HTML that may not have an attribute associated with it.

In our example below, a specific item from your main nav.

You’ll notice that the main nav has a unique attribute, <code>#mainNavigation</code> (id’s are always unique, that’s the difference between them and classes), but none of the nav items are unique, they all have the same attribute,

nav-link—external

This means that if I apply the CSS code that I want to use, <code> display: none;</code>, I'll remove all of the elements with a class attribute of <code>nav-link--external </code>.

So, I'll use the pseudo-selector,

:nth-of-type(2)

to selector the exact one that I want. Since I want to specifically target

nav-link—external

I just attach my pseudo-selector to that class attribute. It should look like this:

nav-link—external:nth-of-type(2)

The '2' means to select the second 2 item of the 'type' that it's attached to.

Then you just finish everything off around it by, adding the property I want to apply

display: none;

and then nesting that within the specific elements I want it to apply to. Final result looks like this:

  #collection-id{ 
  #mainNavigation {
    .nav-link--external:nth-of-type(2){
       display:none;  
    } 
  }
} 

And voila, there you have it. Sign up for my newsletter to get notified about more of these tutorials.