Satori2046 2 Share Posted October 22, 2019 (edited) 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 ! Edited October 22, 2019 by Satori2046 Link to post
christyprice 655 Share Posted October 22, 2019 (edited) 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 October 22, 2019 by christyprice JanetP and Satori2046 2 christyprice.com 🇺🇸 Austin, TX US ✅ Download a FREE Squarespace Prelaunch Checklist 7 Best Squarespace Plugins • 8 Best Premium Squarespace Template Shops • Resources for Designers Link to post
Satori2046 2 Author Share Posted October 22, 2019 It actually worked ! Thanks but now how can I change its position further on the right ? Thanks for the help ! Link to post
christyprice 655 Share Posted October 22, 2019 Glad it worked! I’m not sure about the spacing, maybe someone else will chime in on that! Satori2046 1 christyprice.com 🇺🇸 Austin, TX US ✅ Download a FREE Squarespace Prelaunch Checklist 7 Best Squarespace Plugins • 8 Best Premium Squarespace Template Shops • Resources for Designers Link to post
Satori2046 2 Author Share Posted October 22, 2019 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. christyprice 1 Link to post
tuanphan 8,971 Share Posted October 23, 2019 @Satori2046 Did you solve? If not, you can share url, i think some custom code can push icons to right. You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
Satori2046 2 Author Share Posted October 23, 2019 (edited) 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 ! Edited October 23, 2019 by Satori2046 Link to post
tuanphan 8,971 Share Posted October 23, 2019 @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; } } Satori2046 1 You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
Satori2046 2 Author Share Posted October 23, 2019 @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 : Link to post
tuanphan 8,971 Share Posted October 23, 2019 @Satori2046 width: 75% Satori2046 1 You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
Satori2046 2 Author Share Posted October 23, 2019 It works perfectly thanks, just one thing though, I wanted the "about" link to be also on the right side. 😛 Link to post
tuanphan 8,971 Share Posted October 23, 2019 @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) Satori2046 1 You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
tuanphan 8,971 Share Posted October 23, 2019 forget, change #topnav nav li:nth.... to #topNav nav ul li:nth-child(n+4) { float: right !important; } It will be shorter .... 😋 Satori2046 1 You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
Satori2046 2 Author Share Posted October 23, 2019 It worked perfectly, thank you so much sir ! Link to post
JanetP 2 Share Posted October 23, 2019 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! christyprice and tuanphan 2 Link to post
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment