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

Social links button on Navigation


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
Link to post
  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

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

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

Posted Images

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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

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