Squarespace 7.1 header elements moved above site links

Site URL: https://cyan-orb-th7p.squarespace.com/

In Squarespace 7.1, is it possible to move the Elements above the main navigation site links?

I've attached an image to visually explain what I mean.

If it's possible to only move the social media icons and not the cart icon, I'd be interested to hear any support or advice on this too.

Site is https://cyan-orb-th7p.squarespace.com/

Password is 1066#!

On 3/15/2021 at 8:43 PM, Ben_Keeley said:

Site URL: https://cyan-orb-th7p.squarespace.com/

In Squarespace 7.1, is it possible to move the Elements above the main navigation site links?

I've attached an image to visually explain what I mean.

If it's possible to only move the social media icons and not the cart icon, I'd be interested to hear any support or advice on this too.

Site is https://cyan-orb-th7p.squarespace.com/

Password is 1066#!

Add to Design > Custom CSS

/* button move left */
.header-actions-action.header-actions-action--cta {
    order: 1 !important;
}
.header-actions-action.header-actions-action--social {
    order: 2;
}
.showOnDesktop {
    order: 3;
}

Thank you @tuanphan

I really appreciate your attempt to help.

I've added the custom CSS but, as you can see from my screenshot, the update simply re-ordered the header rather than splitting it into two separate lines.

What I was hoping to achieve was a header that separated the social icons and cart icon onto a line above the navigation and CTA button.

On 3/29/2021 at 11:02 PM, Ben_Keeley said:

Thank you @tuanphan

I really appreciate your attempt to help.

I've added the custom CSS but, as you can see from my screenshot, the update simply re-ordered the header rather than splitting it into two separate lines.

What I was hoping to achieve was a header that separated the social icons and cart icon onto a line above the navigation and CTA button.

Remove above code & add new code

.header-actions.header-actions--right {
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
}
.header-actions.header-actions--right>div:nth-child(-n+3) {
    flex: 1 0 50% !important;
}
.header-actions.header-actions--right>div:nth-child(4) {
    flex: 0 1 100% !important;
}
.header-actions-action.header-actions-action--cart {
    margin-left: 0;
}
a.icon.icon--fill {
    margin-left: auto !important;
    margin-right: 2vw;
}

Thanks @tuanphan

I added some margin-bottom to both icons to create some space between the button and the icons.

.header-actions.header-actions--right {
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
}
.header-actions.header-actions--right>div:nth-child(-n+3) {
    flex: 1 0 50% !important;
}
.header-actions.header-actions--right>div:nth-child(4) {
    flex: 0 1 100% !important;
}
.header-actions-action.header-actions-action--cart {
    margin-left: 0;
    margin-bottom: 30px;
}
a.icon.icon--fill {
    margin-left: auto !important;
    margin-right: 2vw;
    margin-bottom: 30px;
}

The only issue remaining is that the button is now not centrally in alignment with the rest of the header navigation. The text links appear to be top-aligned to the button, likely due to the margin I've added.

Is there a solution you're aware of to make the button and text links all centrally aligned in the row below the social icons and cart?

I've attached a screenshot of the issue.

Try this CSS

.header-actions.header-actions--right {
    position: relative;
    top: -30px;
}