How to centre social media icons in Header?

Hey everybody!

I'm trying to centre my social media icons to underneath my navigation in my header. I came across some code in a previous thread and tried it. However I found that while it did put the social links underneath the header logo and navigation in a centered position, it slightly off-centred everything else such as logo and navigation - is there a simple fix or something I can add/adjust to the code?

The code I tried was this:-

/* Header social */
.header-display-desktop {
    flex-direction: column-reverse;
}
.header-actions.header-actions--left {
    margin-top: 20px;
}

Thanking you all in advance!

Mark

40 minutes ago, Hydrology said:

Hey everybody!

I'm trying to centre my social media icons to underneath my navigation in my header. I came across some code in a previous thread and tried it. However I found that while it did put the social links underneath the header logo and navigation in a centered position, it slightly off-centred everything else such as logo and navigation - is there a simple fix or something I can add/adjust to the code?

The code I tried was this:-

/* Header social */
.header-display-desktop {
    flex-direction: column-reverse;
}
.header-actions.header-actions--left {
    margin-top: 20px;
}

 

Thanking you all in advance!

Mark

Can you share your website URL?

1 hour ago, Web_Solutions said:

Can you share your website URL?

www.artofsoundaustralia.com

Thank you!

2 hours ago, Hydrology said:

www.artofsoundaustralia.com

 

Thank you!

Do you want the social media here(see the attached image)?

9 hours ago, Web_Solutions said:

Do you want the social media here(see the attached image)?

Yes please, when I use the code above it goes there, but then the navigation and the logo become slightly right-centered, like so...

57 minutes ago, Hydrology said:

Yes please, when I use the code above it goes there, but then the navigation and the logo become slightly right-centered, like so...

 

Remove your code and add these on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.header-display-desktop {
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.header-display-desktop .header-actions, .header-display-desktop .header-title-nav-wrapper {
    flex: 0 0 100% !important;
    width: 100% !important;
}

.header-display-desktop .header-title-nav-wrapper {
    order: 1 !important;
}

.header-display-desktop .header-actions.header-actions--left {
    order: 2 !important;
    justify-content: center !important;
    .header-actions-action--social {
        margin: 1.5vw 0 0;
    }
}

1 hour ago, Web_Solutions said:

 

Remove your code and add these on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.header-display-desktop {
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.header-display-desktop .header-actions, .header-display-desktop .header-title-nav-wrapper {
    flex: 0 0 100% !important;
    width: 100% !important;
}

.header-display-desktop .header-title-nav-wrapper {
    order: 1 !important;
}

.header-display-desktop .header-actions.header-actions--left {
    order: 2 !important;
    justify-content: center !important;
    .header-actions-action--social {
        margin: 1.5vw 0 0;
    }
}

 

Thanks for that  - it's definitely looking better, the logo and navigation are centered but, the social media icons are not completely centered - they are slightly skewed to the left a bit (you can tell by looking at them relative to the "Discover Our Brands" button on the page.
Any ideas?

19 minutes ago, Hydrology said:

Thanks for that  - it's definitely looking better, the logo and navigation are centered but, the social media icons are not completely centered - they are slightly skewed to the left a bit (you can tell by looking at them relative to the "Discover Our Brands" button on the page.
Any ideas?

 

Add these code and the bottom of previous code

.header-display-desktop .header-actions.header-actions--left .header-actions-action--social .icon:last-child {
    margin-right: 0 !important;
}

28 minutes ago, Web_Solutions said:

 

Add these code and the bottom of previous code

.header-display-desktop .header-actions.header-actions--left .header-actions-action--social .icon:last-child {
    margin-right: 0 !important;
}

 

You sir are a legend!!!

Many many thanks for helping me with this!