Jump to content

Squarespace 7.1 header elements moved above site links

Recommended Posts

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#!

Social-icons-in-header.PNG

Link to comment
  • 2 weeks later...
  • Replies 5
  • Views 856
  • Created
  • Last Reply
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#!

Social-icons-in-header.PNG

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Screenshot_marked_up.PNG

Link to comment
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.

Screenshot_marked_up.PNG

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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.

Header-issue.PNG

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.