Jump to content

Reduce Spacing on Customized Nav Links

Go to solution Solved by Lesum,

Recommended Posts

url: https://sheep-green-4e8l.squarespace.com/

site pw: kilter

I used some helpful code to target the first 3 nav links to turn them into buttons. Now, I want to target them (in this case, 2 + 3) to change their margin to 1vw instead of the 2vw on the other links.

The :nth-child code I used to target the anchor elements isn't working for the padding. I need to target the class .header-nav-item--external but can't quite figure it out.

Can anyone help? Much appreciated.

Edited by giorgiasage
missing link
Link to comment
  • Solution

@giorgiasage Did you want to change the margin to 1vw only for the buttons? If so, you can add this code snippet:

.header-nav-item.header-nav-item--external:nth-child(2) {
    margin-left: 1vw !important;
.header-nav-item.header-nav-item--external:nth-child(3) {
    margin-left: 1vw !important;

Otherwise, if you want to change the margin for all navigation items, you can add this code snippet:

.header-layout-nav-right .header-nav-item:not(:first-child):not(.header-actions-action--cart) {
    margin-left: 1vw !important;


Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.