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

Moving social icons in header from left to right hand side


NMcMurray

Question

Site URL: https://round-algae-fj2m.squarespace.com/

Hi, I am trying to move the social icons currently displayed in my header so that they now appear on the right, with everything else centralised. Annoyingly it isn't an option in the preset layouts. Anyone know of some code that would allow me to do this? I would like them to be aligned with the centre of the logo on the far right like the attached screenshot. 

Thanks in advance.

Password is:WaveTest

Site URL is: https://round-algae-fj2m.squarespace.com/

Screenshot 2021-07-05 at 13.13.52.png

Link to comment

9 answers to this question

Recommended Posts

  • 0
On 7/5/2021 at 7:15 PM, NMcMurray said:

Site URL: https://round-algae-fj2m.squarespace.com/

Hi, I am trying to move the social icons currently displayed in my header so that they now appear on the right, with everything else centralised. Annoyingly it isn't an option in the preset layouts. Anyone know of some code that would allow me to do this? I would like them to be aligned with the centre of the logo on the far right like the attached screenshot. 

Thanks in advance.

Password is:WaveTest

Site URL is: https://round-algae-fj2m.squarespace.com/

Screenshot 2021-07-05 at 13.13.52.png

Hi.

Now icons is on left, you want to move them to right?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 7/7/2021 at 3:36 PM, NMcMurray said:

Hi, yes please. So they appear on right in a similar location as shown in the attachment above, if possible. Many thanks

Add to Design > Custom CSS

/* Icons to right */
.header-display-desktop {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
.header-actions.header-actions--left {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@tuanphan 
Hi Tuanpan

Above code is works perfect for flipping the social icons from right to left 👍
However it also flips my cart icon from the right side to the left side (see pic attached).

Do you know how the code can be edited to accommodate: 
a) having site navigation at the center
and
b) keep both cart and social icons on the left side. Preferably first social icons and then cart icon when reading from left to right. 

site: gadeallure.com

Thank you 2107727744_Fullnavigationpanelwithcurrentcode.thumb.png.ae8923abd25cc5cceb3e6228e3916b68.png1060659418_Need-Rightsideview.png.cf41024f8c12b125bf810057776645c6.png

Link to comment
  • 0
On 2/9/2022 at 5:13 PM, Jules_level said:

@tuanphan 
Hi Tuanpan

Above code is works perfect for flipping the social icons from right to left 👍
However it also flips my cart icon from the right side to the left side (see pic attached).

Do you know how the code can be edited to accommodate: 
a) having site navigation at the center
and
b) keep both cart and social icons on the left side. Preferably first social icons and then cart icon when reading from left to right. 

site: gadeallure.com

Thank you 2107727744_Fullnavigationpanelwithcurrentcode.thumb.png.ae8923abd25cc5cceb3e6228e3916b68.png1060659418_Need-Rightsideview.png.cf41024f8c12b125bf810057776645c6.png

You mean move this?

movethis.thumb.png.89b2db496c37b5db5b9968c18fcdfd3f.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Hi tuanphan & Jules_level

Sorry to jump on your thread but are you able to assist with only moving the cart logo to the left side and keeping the button to the right. 

I have added your CSS code which works perfectly however it moves everything to the left side where as I want to button to remain on the right. 

https://wvcharge.squarespace.com

Pass: waev

Thank you in advance

Joe

Edited by HG-Design
Link to comment
  • 0
On 2/23/2022 at 5:29 PM, HG-Design said:

Hi tuanphan & Jules_level

Sorry to jump on your thread but are you able to assist with only moving the cart logo to the left side and keeping the button to the right. 

I have added your CSS code which works perfectly however it moves everything to the left side where as I want to button to remain on the right. 

https://waevcharge.squarespace.com

Pass: waev

Thank you in advance

Joe

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('.header-display-desktop .header-actions-action.header-actions-action--cart').insertBefore('.header-display-desktop>.header-burger');
	});
</script>
<style>
  .header-actions-action.header-actions-action--cart:first-child {
    display: none;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
6 hours ago, Valentina_ said:

Hi im trying something similar but want to put social icon before the hamburger 

 

https://gilded-group.squarespace.com/config/pages

Screen Shot 2022-06-21 at 4.07.30 PM.png

Hi. What is access password?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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