Jump to content

Reduce Spacing on Customized Nav Links

By giorgiasage, in Customize with code

Go to solution Solved by Lesum,

Recommended Posts

giorgiasage Level 2

giorgiasage

Posted
Posted (edited)

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
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Lesum
Lesum

@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 !imp

  • Solution
Lesum Level 9

Lesum

Posted
  • Solution
Posted (edited)

@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. 

Sam
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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources