Floating vertical social media links in Squarespace

You’re probably familiar with social share links widgets that you can add to your site through a third-party so people can share your content.

However, if what you’re wanting to do is have Squarespace’s social icons from the nav bar – linking to your account – to float or stack vertically like a little bookmark flag, this post is for you.

Let’s take a look at how you can realign the social icons from your menu, in Brine, to set them vertically and make them float over the content of your page.

Creating a social media icons flag

Let’s start by adding the links to our top nav bar through the Style Editor.

I’ll also be styling mine a bit and making them knockout, 34px in size and giving them a pink background.

Keep in mind you need to have at least ONE connected account (Settings > Connected Accounts) for the option to display them to pop up in the editor.

1. Adding social media icons to header in Brine.png

Now let’s move onto stacking them vertically.

To do this, we need to set the icons to display as block, so they sit on top of each other instead of next to each other like they’re doing now.

So, let’s take a look to find out how we can target their container.

2. Selecting each social icon link.png

Zooming into our Inspect Element window we can see that each container is a link element with a class of SocialLinks-link

3. Closer look at social media link icon class.png

So, let’s head over to our Custom CSS window and use that class to target them.

.SocialLinks-link {

}
4. Adding selectors to CSS window.png

And now, we’ll simply change the display property to block.

.SocialLinks-link {
  display: block;
}
5. Stacking social icons in Brine header.png

We have vertical social icons people!

Alright, now we’re going to select the whole container holding our icons to reposition it and style it a bit.

6. Selecting social icons block.png

We can see the container is called Header-social so we’ll use that class to target it.

.Header-social {
  position: absolute;
}
7. Setting block to absolute.png

Alright, now that we took it outside of the normal flow of the page, let’s make sure it stays aligned with the top of the section holding it along with the search bar.

.Header-social {
  position: absolute;
  top: 0;
}
8. Positioning offset.png

Hmmm… not quite.

We’re going to have to set the container holding both our social block and search block as relative, so it serves as a guidance for the positioning of the social icons flag.

If we look at it through Inspect Element…

9. Selecting top right nav.png

We can see that there’s no class or ID available, but we do have an attribute. So we’re going to do the same thing we did in a previous tutorial and target it through that.

Here’s a closer look:

10. Zoom in.png

So let’s give it a position of relative

div[data-nc-container="top-right"] {
  position: relative;
}
11. Making it relative.png

Great! Now the top of our social icons flag is aligned to the top of that whole section container.

It is getting cut off on the bottom though, so let’s bring the whole social block to the front with z-index:

.Header-social {
  position: absolute;
  top: 0;
  z-index: 1;
}
12. Bringing icon flag to the front.png


Ok, and let’s fix that overlapping issue going on with the search bar.

I’ll target the latter and give it a right margin of around 80px to make enough space for the flag!

13. Selecting search bar.png

The search bar has a class of Header-search so I’ll use that.

.Header-search {
  margin-right: 80px;
}
14. Moving search bar.png

Last but not least, I want to add a border to my entire social block.

.Header-social {
  position: absolute;
  top: 0;
  z-index: 1;
  border: 2px solid pink;
}
15. Adding border to social icons in Squarespace.png

Nice! Take a look:

16. Creating vertical social icons in header Brine.png

There you have it! That’s how you can create a vertical social icon flag in your own header in Brine!

How to float vertical social icons

Now, I know you might be wondering if you can take this to next level and float them completely off the limits of the header, and the answer is OF COURSE YOU CAN!

To do this, I recommend setting your social media icons on the bottom navigation instead.


We're going to use the same code from before, but we’re not going to need all of it.

We can get rid of the relative positioning of the top right container since we won’t need it in this case, and we can also get rid of the margin of the search bar.

.SocialLinks-link {
  display: block;
}
.Header-social {
  position: absolute;
  top: 0;
  z-index: 1;
  border: 2px solid pink;
}

And then all we’re going to do is set the right offset as 0, so the flag sticks to the right side of our browser window.

.SocialLinks-link {
  display: block;
}
.Header-social {
  position: absolute;
  top: 0;
  z-index: 1;
  border: 2px solid pink;
  right: 0;
}
17. Floating vertical social icons in Squarespace.png


Ta-dá!

Now, if we take a look at this in a slightly smaller screen, without hitting the breakpoint of our navigation menu (around tablet size), we can see the icons start overlapping with the content of our page:

18. Issue with smaller screens.png

An easy fix for this – and something you can also apply to the previous positioning of this flag – is setting a media query for the screen size where this starts to happen, so that the icons stay horizontal after that, but remain vertical for bigger monitors.

If you’re adding styles to your block through CSS, I recommend placing them outside the media query so they always show up!

.Header-social {
  border: 2px solid pink;
}
@media screen and (min-width: 1400px) {
  .SocialLinks-link {
    display: block;
  }
  .Header-social {
    position: absolute;
    top: 0;
    z-index: 1;
    right: 0;
  }
}
19. Media query fix.png

Awesome!

And that’s how you can create a vertical social icons flag in your Squarespace site, and set it to float around!

Until next time,

B.

 

Full code

OPTION #1: VERTICAL ICONS

.SocialLinks-link {
  display: block;
}
.Header-social {
  position: absolute;
  top: 0;
  z-index: 1;
  border: 2px solid pink;
}
div[data-nc-container="top-right"] {
  position: relative;
}
.Header-search {
  margin-right: 80px;
}

OPTION #2: FLOATED VERTICAL ICONS

.Header-social {
  border: 2px solid pink;
}
@media screen and (min-width: 1400px) {
  .SocialLinks-link {
    display: block;
  }
  .Header-social {
    position: absolute;
    top: 0;
    z-index: 1;
    right: 0;
  }
}