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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. 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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. 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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. 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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. 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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
cmcneill Posted October 7, 2022 Share Posted October 7, 2022 Worked perfectly - thanks so much!! 😀 creedon 1 Link to comment
Faunesque Posted June 5 Share Posted June 5 Hello! I am in the same kind of issue 🙂 I have put all of the codes you gave but can you telle me how can I align the social icons to the menu? Also any idea to use the total width for the about and newsletter page? Thanks a lot! Link to comment
creedon Posted June 5 Share Posted June 5 5 hours ago, Faunesque said: can you telle me how can I align the social icons to the menu? Also any idea to use the total width for the about and newsletter page? It looks like there is very little room in the header for both. Please post the URL for a page on your site where we can see your issue. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. Please set up a site-wide password, if your site is not public and 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 site-wide password and how to share a link documentation to understand how they work. We can then take a look at your issue. You may find How to post a forum question post useful. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Faunesque Posted June 5 Share Posted June 5 unfortunately I don't think I can do that, my actual site www.faunesque.com is running. I made a copy of this site to try the wexley template. If I understand correctly I need to publish this new unfinished version with a password right? Maybe you are right and the social media icons can just be in the about page. I would just love to know how to present this about page better using all the width. Link to comment
creedon Posted June 5 Share Posted June 5 28 minutes ago, Faunesque said: I made a copy of this site to try the wexley template. If I understand correctly I need to publish this new unfinished version with a password right? You don't need to publish it to the world. You can share it just with us here on the forum following my post above. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Faunesque Posted June 5 Share Posted June 5 https://dodecahedron-bronze-fkx2.squarespace.com/ pass: @hP7LYxmd?j7Lc&r does it work? Link to comment
creedon Posted June 5 Share Posted June 5 Quote does it work? It works! Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Faunesque Posted June 5 Share Posted June 5 I also have a question, in my dashboard the copy of my site I am working on says : "Website trial expires on Jun 6, 2023" Does it mean that I will need to do it all over again tomorrow? Link to comment
creedon Posted June 5 Share Posted June 5 Quote in my dashboard the copy of my site I am working on says : "Website trial expires on Jun 6, 2023" Does it mean that I will need to do it all over again tomorrow? Possibly not. SS may offer you a short extension when they notify you via email that the trial is over. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
creedon Posted June 5 Share Posted June 5 6 hours ago, Faunesque said: I have put all of the codes you gave but can you telle me how can I align the social icons to the menu? I'm not seeing the menu on your duplicate site. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Faunesque Posted June 5 Share Posted June 5 Because I already pay for an annual plan, I just copied my website to try another template Link to comment
Faunesque Posted June 5 Share Posted June 5 oh shoot, me neither, I don't know what to do 😕 I suck at this, I am really sorry. 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