Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Recommended Posts

Hello friends,

I'm using the Wexley template and of course now I realise I can't add Instagram and social medial button on the main navigation (upper right)

I've posted a capture of the area I would like the buttons to appear. 

Thanks for any help, it's driving me nuts. : /


Cheers !

Capture.JPG

Edited by Satori2046

Share this post


Link to post

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.

Edited by christyprice

👩‍💻christyprice.com :: Squarespace Circle Member & Authorized Trainer   🇺🇸 Austin, TX US 
➡️Custom CSS Every Squarespace Website Needs | Why I switched from Mailchimp to Squarespace Campaigns

Share this post


Link to post

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

Edited by Satori2046

Share this post


Link to post

@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;
}
}

 

Share this post


Link to post
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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...