How to modify the space between the header social icons in Squarespace (7.1)
Ok, so you know how much I love a not-really-an-issue-until-you-want-to-modify-it kinda tweak.
And this week’s customization is no exception.
This CSS trick is inspired by a question a Club member made a while ago.
He wanted to know if there was a way to modify the spacing between the social icons in the header of Squarespace 7.1, SEPARATELY from the space between regular nav items.
The native “Link Spacing” slider changes the gap between ALL links (but if you’re here you’ve probably already noticed that) so if you’re interested in learning how a bit of code can help adjust the space ONLY for the social icons, then dive into the tutorial below!
Tutorial
Overview & timestamps
The CSS trick to make the modification is very simple, but we'll take a couple of minutes beforehand to break down how to build our code and why we'll be doing it that way:
00:00 - Intro
01:06 - Overview of the issue
Before we begin with the customization, we’ll take a quick peek at why it’s necessary to use CSS to modify this part of the site by looking into the native options available.
01:54 - Creating the necessary snippet to adjust the space via CSS
Next up, we’ll hop onto the Inspect Element tool to see how the gap is originally created, so we can see what needs to be modified in our code. We’ll also take a few minutes to decide whether we should REUSE the existing selector or CREATE our own, based on how “versatile” we want the code to be.
05:45 - Stopping the first social icon gap from being modified
With our new spacing in place, we’ll check out how we can exclude the first social icon from the modification so that the spacing between the last navigation link and the first icon doesn’t get modified (spoiler alert: we’ll need the :not( ) selector for this part of the process!).
06:59 - Checking out mobile
Last but not least, we’ll take a look at mobile and see if we need to make any modifications for smaller screens too.
And that’s everything!
Now that you know what it takes to modify that space, you can adjust the code as needed (left margin vs. right margin) depending on the layout you’re using in your header.
Until next time,
B.
Full code
/*HOW TO MODIFY THE SPACE BETWEEN THE HEADER SOCIAL ICONS IN SQUARESPACE 7.1*/
.header-actions-action--social .header-icon:not(:first-child) {
margin-left: 10px !important;
}
//Optional - To modify the space for mobile
.header-menu-actions-action {
margin: 15px 2.5px;
}