Jump to content

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

Recommended Posts

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

Screen Shot 2021-02-26 at 14.19.27.jpg

Screen Shot 2021-02-26 at 14.19.19.jpg

Edited by ontodont
Link to comment

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

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1 year later...
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

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

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
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 by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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

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?

Screen Shot 2022-10-05 at 12.19.23 AM.png

Screen Shot 2022-10-05 at 12.19.41 AM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.