Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Social header icon placement in 7.1 - Help please


Johnnyafrica

Question

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 🙂

image.thumb.png.4c2ce9296c5421089971d9dfa427b393.png

Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@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

Thank you! PERFECT!

Posted Images

7 answers to this question

Recommended Posts

  • 0

@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.

Edited by creedon
version 2 of CSS

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

Link to post
  • 0
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.

 

Screen Shot 2021-02-14 at 12.37.48 PM.png

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...