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!! 😀

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!

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.

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.

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.

https://dodecahedron-bronze-fkx2.squarespace.com/

pass: @hP7LYxmd?j7Lc&r

does it work?

Quote

does it work?

It works!

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?

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.

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.

Because I already pay for an annual plan, I just copied my website to try another template

oh shoot, me neither, I don't know what to do 😕 
I suck at this, I am really sorry.