Moving social icons in header from left to right hand side

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/

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/

Hi.

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

2 hours ago, tuanphan said:

Hi.

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

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

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;
}

@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 

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 

You mean move this?

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

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>

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

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

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

Hi. What is access password?