ontodont Posted February 26, 2021 Share Posted February 26, 2021 (edited) Site URL: https://www.nickdavid.co.uk/ Hi, I am working on a site which is using Wexley as its base template. The default social icons are only available on the bottom footer where I can move them left/right/center. I wish there was a way to move the footer block to the top right of the site above the header text or alternatively add new set of social icons to the top right of the site. If someone know a good way to insert some code to fix this that would be very helpful. I have attached images for what I am talking about. This only is required to work on the desktop version. Thanks for the help Edited February 26, 2021 by ontodont Link to comment
derricksrandomviews Posted February 26, 2021 Share Posted February 26, 2021 https://christyprice.com/squarespace-tips-tricks/how-to-add-social-media-icons-to-squarespace-navigation Link to comment
ontodont Posted February 26, 2021 Author Share Posted February 26, 2021 Thank you @Derricsrandomviews, but unfortunately I get stuck as far in as secondary navigation, as the Squarespace template does not appear to have that activated which I guess is key for this to work? I belive this is a feature they removed from 7.1 onward? Please let me know if its still a possible way to go around this. Thank you Link to comment
creedon Posted February 26, 2021 Share Posted February 26, 2021 Add the following to Design > Custom CSS. .site-alignment-left.header-navigation-split .main-nav { margin-right : 0; } #socialLinks { display : inline-block; margin-top : 40.5px; } Add the following to Settings > Advanced > Code Injection > HEADER. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Settings > Advanced > Code Injection > FOOTER. <script> $( ( ) => { /* move footer social icons to header SS Version : 7.0 Template : Wexley */ $( '#socialLinks' ).appendTo ( '#topNav' ); } ); </script> Let us know how it goes. cmcneill 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
cmcneill Posted October 4, 2022 Share Posted October 4, 2022 Thanks, @creedon! Truly magical! Is there a way to add some padding between the social media icons as well as the other main navigation? Link to comment
creedon Posted October 4, 2022 Share Posted October 4, 2022 26 minutes ago, cmcneill said: Is there a way to add some padding between the social media icons as well as the other main navigation? Please post the URL for a page on your site where we can see your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
cmcneill Posted October 4, 2022 Share Posted October 4, 2022 https://www.carolinelindermcneill.com/ I reduced the space between the main navigation links of work and resume (using the site styles) to mimic the amount of space between the email and linkedin icons. I need to add space between resume and the email icon and ideally a bit more space between all icons. Was trying to see if I could add margin padding to the email/linkedin icons in the code but I'm not exactly sure where to do this. Thanks for your help! Link to comment
cmcneill Posted October 4, 2022 Share Posted October 4, 2022 Also trying to get rid of the gray hover state for the social icons and just make them all black. And I feel like the email icon isn't quite bottom-aligned with the linkedin icon. But that might not be as noticeable if the icons can be spaced out a bit. Updating to a 7.1 template will probably solve these issues but I just need to revamp my site for the moment before giving it an overhaul. Thanks again! Link to comment
creedon Posted October 4, 2022 Share Posted October 4, 2022 (edited) On 10/3/2022 at 10:35 PM, cmcneill said: Is there a way to add some padding between the social media icons as well as the other main navigation? Add the following to Design > Custom CSS. It is not a solution to all the issues you bring up. #topNav { --menu-item-spacing : 10px; } #topNav nav li { margin-right : var( --menu-item-spacing ); } .site-alignment-center #topNav .main-nav { margin-right : unset; } .social-icon-style-normal #topNav .social-links .sqs-svg-icon--wrapper { margin : 0 ~"calc( var( --menu-item-spacing ) / 2 )"; } .social-icon-style-normal:not( .unused-classname ) #topNav .social-links:hover .sqs-use--icon { fill : unset; } The --menu-item-spacing CSS variable can be used to set the spacing. Let us know how it goes. Edited October 5, 2022 by creedon version 2 cmcneill 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
cmcneill Posted October 4, 2022 Share Posted October 4, 2022 Thanks for the code - unfortunately it made the social icons disappear and ended up moving the main navigation closer to the site title. Might just put the social links on a contact page for the moment so the nav stays looking clean. Is there any way to force space to the right of the word "Resume" - like with an invisible character? It's the only workaround I can think of until I upgrade to 7.1 Link to comment
creedon Posted October 4, 2022 Share Posted October 4, 2022 1 hour ago, cmcneill said: unfortunately it made the social icons disappear and ended up moving the main navigation closer to the site title. This is what I see when I install the code locally. cmcneill 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
cmcneill Posted October 5, 2022 Share Posted October 5, 2022 Your version looks great! I'm pasting the code into the Custom CSS area but then I see the "Operation on an invalid type" message at the bottom and my social icons disappear (see attached.) Am I pasting this in the right place? Link to comment
creedon Posted October 5, 2022 Share Posted October 5, 2022 14 hours ago, cmcneill said: but then I see the "Operation on an invalid type" message I made an adjustment to the code. The code was valid CSS but the ancient version of LESS that SS uses to compile the CSS choked on it. Let us know how it goes. cmcneill 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
cmcneill Posted October 7, 2022 Share Posted October 7, 2022 Worked perfectly - thanks so much!! 😀 creedon 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment