Marquee: Social icons in header?

Is it possible to add social buttons to the page header? I wish I could have Twitter & FB buttons just to the right of my page nav. However, the nav section doesn't appear to be editable.

I'm using the Marquee template.

Also wondering if this is possible. Has anyone found out about this?

I have spent hours looking for a solution to this issue and have finally found one! Or at least a work around. You will need to know a bit about coding however, so hopefully you’ve got that.

You can add social links into the top navigation by doing the following:

1. Go to your Navigation settings page
2. Click “+ Page” (bottom of “Main Navigation”)
3. Select “Link” from the options

Write the code, as you would if you were writing an HTML image link >
For example my Facebook nav icon link is:

<img src="https://static.squarespace.com/static/52faa431e4b06b4beaf4355c/t/533aaf52e4b041bac4e3366d/1396354899016/facebook?format=100w" alt="facebook">

So it would be:

<img src="image URL" alt="facebook">

Then, in the link area of the same window, paste the page URL you want to link to.

Save and finish!

You can then resize your images, move them or style them however you’d like through custom CSS.

Here’s how mine ended up.

Really hope this all helps!

FULL credit for this solution and a HUGE thank you goes to Brok, original question & answer.

Thank you for the credit. There's not enough of that in the Squarespace community. I get e-mails daily BEGGING for help with Squarespace, send the response and don't even get a thank you!

There's also another way to do this, going along the same lines but it has slightly fewer steps so might be of interest.

You can use Font Awesome icons (you just need to add a line of code to your website header via the "Code Injection" section in the settings) and then use their icon codes instead of the image code when you're adding a link to the navigation.

For example, using their Twitter code, add this to the title section:

<i class="fa fa-twitter"></i>

Then just add the Twitter link in the URL section.

You can also adjust the size, for example, this would make it double in size:

<i class="fa fa-twitter fa-2x"></i>

You can actually make changes in the normal style editor too as it's just like another font, so you can edit the colours etc. (exactly what you can do will depend on your template) without having to use any CSS (although you can style it with CSS too if you want).

More information here: Font Awesome Examples

This would also work if you wanted any other icons in your navigation as they have a large library of different icons.

Hope that helps, this is my first answer on here so I'm not sure of etiquette, should I post this on the other similar threads too? I will second the thanks to Brok whose initial response led me down this path!

Thanks so much!!!!!!!

Thanks for this! Definitely is so much easier than sizing, uploading, linking etc. Quality info right there! :)

Ma man, you are a life saver, thank you!

That is so genius. Opens up other possibilities as well. Thank you!

Thank you so much for showing this! I have no idea how to find my other links though like Twitter and SoundCloud.

You wrote:

How did you know that that was your Facebook nav icon link? Where can I find mine? Where are the other social media icons?

Thank you!

Hey Daniell, here's some info for both methods, custom and font awesome.

Custom: To answer your question, I'll prelude by saying something that may be obvious to some, but not to others--

1. Make sure you have uploaded all of your custom social icon images that are to be referenced and used with the social links.

Uploading custom images/icons:

1. Create a page in the "Unlinked Pages" section
2. Upload images on that page

3. Grab Image Links: Go to page where your images are, right click and "copy image location" or "view image" & copy the address in the URL

4. Continue as per answer previously submitted

Font-Awesome:The more simplistic route if you don't have custom images/icons.

1. Just follow the instructions in the top answer submitted by KatyC on this page!

http://answers.squarespace.com/questions/19871/social-buttons-in-header/46043

I also answered another question on here with font-awesome instructions if you need more info or are having trouble:http://answers.squarespace.com/questions/18091/add-or-move-social-icons-to-header-in-marquee-template/56671

See below! :)

Thank you!

Any ideas how to get them on their own line, either below or beneath the navigation? Still in the header if necessary, just on their own line?

I thought about changing the fa to display:block vs. inline block but I just noticed it's already in block. I'm working on this and would love it if I could somehow separate the social icons from the navigation. I'm using Hadley btw.

http://delia-jalomo-do7x.squarespace.com

Maybe something to do with positioning? Sorry my CSS knowledge doesn't quite extend that far but hopefully someone on here will be able to help.

Good luck :-)

p.s. Your business sounds amazing!

If you want a bit more of an in-depth guide on how to do this, Christy Price has put together a guide including a video walkthrough on her site: https://christyprice.com/squarespace-tips-tricks/how-to-add-social-media-icons-to-squarespace-navigation