Jump to content

Social link location in main navigation

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://cone-tuna-x47f.squarespace.com/contact

Does anyone know if it is possible to move the location of the social icons on the main navigation? Squarespace automatically aligns them the the left side of the screen. I would like them to be to the right and directly inline with the main text links (image of design mockup attached).

 

Thanks in advance for any help!

URL: https://cone-tuna-x47f.squarespace.com/contact

Pass: haircare

Screen Shot 2021-09-13 at 10.52.10 PM.png

nav design.png

Link to comment
  • Replies 11
  • Views 817
  • Created
  • Last Reply

Top Posters In This Topic

Hi,

2 options to do this

O1. Use JavaScript code to move social icons into nav (Need a Business Plan or higher)

O2. Use FontAwesome to add icons via Link Item in Pages > Main Navigation (Support All Plans)

Which option do you prefer?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/18/2021 at 10:03 AM, happyscone said:

@tuanphan either works! I will be using a business plan, but I kind of want to learn how to do it the svg way too 🙂

Step 1. Add this to Code Injection > Header

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">

Step 2. In Pages > Main Navigation >> Add 5 Link Items

Item 1

  • Name: FB
  • URL: Fb url

Item 2

  • Name: IN
  • URL: Instagram URL

Item 3

  • Name: PI
  • URL: Pinterest url

Item 4

  • Name: TW
  • URL: Twitter URL

Item 5

  • I don't know icon 5 name?? You can add coressponding name & url

When you're done, let me know. I will check & give the code to replace all text with social icons

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
22 hours ago, happyscone said:

@tuanphan I added the Instagram + FB links as you described above.

Add to Design > Custom CSS

Quote

header#header a[href*="facebook"], header#header [href*="instagram"] {
    font-size: 0;
}
header#header a[href*="facebook"]:before {
    content: "\f09a";
    font-family: "Font Awesome 5 Brands";
    font-size: 18px;
}
header#header [href*="instagram"]:before {
    content: "\f16d";
    font-family: "Font Awesome 5 Brands";
    font-size: 18px;
}
 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/23/2021 at 11:15 PM, happyscone said:

@tuanphan this worked great on desktop, but on mobile the icons are stacking. Is there a way to make them all on the same line?

621488631_ScreenShot2021-09-23at9_14_47AM.thumb.png.2cf52b15649d721ab246ca3281dde603.png

Add to Design > Custom CSS

/* Social icons on mobile */
@media screen and (max-width:767px) {
.header-menu-nav-folder-content {
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: unset;
}
.header-menu-nav-folder.header-menu-nav-folder--active>div>div:nth-child(n+5) {
    width: 15% !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution
On 9/27/2021 at 1:45 AM, happyscone said:

@tuanphan this worked, but the icons are not center on the screen. I tried a few different properties, but no success.

Screen Shot 2021-09-26 at 11.43.56 AM.png

Add this to Design > Custom CSS

/* Mobile-center menu overlay icons */
@media screen and (max-width:767px) {
.header-menu-nav-folder.header-menu-nav-folder--active>div>div:nth-child(n+5) {
    position: relative;
    left: -6.5vw;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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