Can You Decorate Link In Squarespace

Okay, so you want to remove a link from just i folio on Squarespace, eh? We'll that'due south just nifty. Here's how we do information technology.

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

In our instance, nosotros want to utilize a style (removing an element with CSS is a way of styling information technology) to ane of the chief nav items. At that place are a agglomeration of unlike types of selectors that I won't go into at present, just the type of selector we'll be using today is something called a pseudo-selector.

Pseudo selectors

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 united states of america a bunch of time.

Problem is, if a specific chemical element doesn't have a unique attribute that we can select, in that location isn't a fashion to mode just that i element. This is where pseudo-selectors come in.

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

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

You lot'll notice that the main nav has a unique aspect, <code>#mainNavigation</code> (id'south are always unique, that'due south the difference betwixt them and classes), simply none of the nav items are unique, they all have the same attribute,

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

So, I'll use the pseudo-selector,

to selector the exact 1 that I desire. Since I desire to specifically target

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 two item of the 'type' that it's attached to.

And then yous but finish everything off around it by, adding the property I want to apply

and and then nesting that within the specific elements I want it to employ to. Concluding result looks similar this:

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

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

Volition Myers

I back up spider web designers and developers in Squarespace by providing resources to improve their skills.

https://www.volition-myers.com

Source: https://www.will-myers.com/articles/remove-a-link-from-your-main-nav-on-just-one-page-in-squarespace

Posted by: ogdenvioner1974.blogspot.com

Share this post