How can I move/add social icons to top right header? Using Wexley.

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

https://christyprice.com/squarespace-tips-tricks/how-to-add-social-media-icons-to-squarespace-navigation

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

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.

Thanks, @creedon! Truly magical! Is there a way to add some padding between the social media icons as well as the other main navigation?

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.

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!

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!

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.

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

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.

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?

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.

Worked perfectly - thanks so much!! 😀