Social header icon placement in 7.1 - Help please

I have a client who wants the social icons in a header on the right hand side.

Love some ideas on how to do this. They also want a centred layout for the logo and navigation. This is the current layout but I need to correct it moving the Social icons next to 'About'

Love to hear any suggestions 🙂

Left or right side?

On 12/5/2020 at 9:51 PM, tuanphan said:

Left or right side?

They would like the links on the right side next to the About link

Bumping this question. I would love to move my social icon to the left of my site logo! Any help would be appreciated. 

theoldyew.com

@plantshop203

Add the following to Design > Custom CSS.

/* begin arrange elements for moving social icons after navigation */

  .header-layout-branding-center .header-nav .header-nav-item {
  
    margin-right : 1.5vw;
    
    }
    
  .header-nav-wrapper {
  
    align-items : center;
    display : flex;
    
    }
    
  /* end arrange elements for moving social icons after navigation */

Add the following to Settings > Advanced > Code Injection > FOOTER.

<script>

  $( ( ) => {
  
    /*
    
      move social icons after navigation for v7.1 site using navigation, logo,
      cta inline header layout
      
      SS version: 7.1
      
      */
      
    $( '.header-display-desktop .header-actions-action--social' )
    
      .appendTo ( '.header-display-desktop .header-nav-wrapper' );
      
    } );
    
  </script>

This is for a v7.1 site.

Let us know how it goes.

12 hours ago, creedon said:

@plantshop203

Add the following to Design > Custom CSS.

.header-actions-action--social {

  display : inline-flex;
  margin-left : 1vw;
  
  }

Add the following to Settings > Advanced > Code Injection > FOOTER.

<script>

  $( ( ) => {
  
    /*
    
      move social icons after navigation for v7.1 site using navigation, logo,
      cta inline header layout
      
      SS version: 7.1
      
      */
      
    $( '.header-display-desktop .header-actions-action--social' )
    
      .appendTo ( '.header-display-desktop .header-nav-wrapper' );
      
    } );
    
  </script>

This is for a v7.2 site.

Let us know how it goes.

THANK YOU. This works great. I'm now wondering... how can I change the top padding of the new placement of the IG icon? It's sitting just a little above the nav items.

I tried this:

.header-actions-action--social {
  display : inline-flex;
  margin-left : 23px!important;
  padding-top: 3px!important;
  }

but it changes the padding of all three of those items, not just the IG icon.

@plantshop203

I've updated the CSS in my previous post. Replace the previous code with the new.

Thank you! PERFECT!