Social links button on Navigation

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 !

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.

It actually worked ! Thanks but now how can I change its position further on the right ?  

Thanks for the help !

Glad it worked! I’m not sure about the spacing, maybe someone else will chime in on that!

Thanks for the help !

Thats a screenshot just in case somebody would know the trick. Social icons should be on the right size, not attached to the main links. 

 

@Satori2046 Did you solve? If not, you can share url, i think some custom code can push icons to right.

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 !

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

@tuanphan It worked ! But I need to push even further away. What part of the code should I switch to find the right "distance" ?

Thanks a bunch and here's a pic of the result : 

@Satori2046 width: 75%

It works perfectly thanks, just one thing though, I wanted the "about" link to be also on the right side. 😛

@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)

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

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

It will be shorter .... 😋

It worked perfectly, thank you so much sir !

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!