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.

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.

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.

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

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

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

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.

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

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.

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…

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:

So let’s give it a position of relative

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:

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!

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

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

Nice! Take a look:

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

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.

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.

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:

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!

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.

OPTION #1: VERTICAL ICONS

OPTION #2: FLOATED VERTICAL ICONS