Jump to content

Social links button on Navigation

Recommended Posts

  • Replies 14
  • Created
  • Last Reply

I've added social links to the nav in the York family templates, so that same method may work for Wexley as well. It requires a bit of a workaround, but it's possible if you are on a Business plan or better.

Step 1: Copy and paste the stylesheet code below into Settings > Advanced > Code Injection into the HEADER box. (You can check the fontawesome.com website to be sure this is the most recent CDN code to serve up the icons.)

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

Step 2: In Pages, click the + beside the navigation area you want to use (we used Secondary Navigation in the example above) and under Create New Page choose Link.
For Link Title add the Font Awesome code for the icon from their site. For example, instagram is 

<i class="fab fa-instagram"></i>

And for Link you’ll just paste in your social media url and remember to click “Open in New Window,” as it’s best practice to open a new window when linking to another website.

More details with a video on this post.

Link to comment

Hey @tuanphan, thanks for the reply,

I found a way but it really is not the proper way, I simply created 15 dozen empty pages to push them away haha

If you have a proper code that would make it, Id love that. 
 

Also I had an optional question, how is it possible to make a hover effect on a whole gallery block ?  But I might post this question in a different topic. 

Thanks !

 

 

Screenshot_1.png

Link to comment

@Satori2046 Remove empty nav items, then add to Home > Design > Custom CSS

@media screen and (min-width:991px) {
.site-alignment-left.header-navigation-normal #topNav {
    width: 75%;
}
#topNav nav {
    width: 100%;
}
#topNav nav li:nth-child(5), #topNav nav li:nth-child(6), #topNav nav li:nth-child(7), #topNav nav li:nth-child(8) {
    float: right !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@Satori2046 edit the above code to 5, 6, 7, 8 > 4, 5, 6, 7

#topNav nav li:nth-child(4), #topNav nav li:nth-child(5), #topNav nav li:nth-child(6), #topNav nav li:nth-child(7)

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

forget, change #topnav nav li:nth.... to 

#topNav nav ul li:nth-child(n+4) {
    float: right !important;
}

It will be shorter .... 😋

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
20 hours ago, christyprice said:

I've added social links to the nav in the York family templates, so that same method may work for Wexley as well. It requires a bit of a workaround, but it's possible if you are on a Business plan or better.

Step 1: Copy and paste the stylesheet code below into Settings > Advanced > Code Injection into the HEADER box. (You can check the fontawesome.com website to be sure this is the most recent CDN code to serve up the icons.)


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

Step 2: In Pages, click the + beside the navigation area you want to use (we used Secondary Navigation in the example above) and under Create New Page choose Link.
For Link Title add the Font Awesome code for the icon from their site. For example, instagram is 


<i class="fab fa-instagram"></i>

And for Link you’ll just paste in your social media url and remember to click “Open in New Window,” as it’s best practice to open a new window when linking to another website.

More details with a video on this post.

Thank you! This tip helped me to add a site search to my header!
 

Screen Shot 2019-10-23 at 2.55.24 PM.png

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.