Jump to content

How to switch placement of social icons and logo in header

By PoppyShotts, in Customize with code

Go to solution Solved by Beyondspace,

Recommended Posts

  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

PoppyShotts
PoppyShotts

Thank you so much for your help - that worked perfectly!

Posted Images

Beyondspace Level 14

Beyondspace

Posted
Posted
1 hour ago, PoppyShotts said:

Hi,

Please could someone help me to switch placement of social icons and logo in header using CSS? A screenshot of what I mean is attached below. 

https://badger-wrasse-4pnf.squarespace.com/ 

password: roshaimage.thumb.png.80f887345bc3ce400de38566c1ba9ef2.png

 

Many thanks! 

Poppy

 

Do you mean something like this?

image.thumb.png.143828ff04b73c0823297b0e1077f450.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution
Beyondspace Level 14

Beyondspace

Posted
  • Solution
Posted
6 minutes ago, PoppyShotts said:

Yes that would be amazing - also could the main navigation also shift to the right (with the logo on the far right) thank you so much for your help..

Try adding to Home > Design > Custom Css 

.header-display-desktop .header-title-nav-wrapper {
  order: 2;
}

.header-display-desktop .header-title-nav-wrapper .header-title {
  order: 2;

}
.header-display-desktop .header-title-nav-wrapper .header-nav {
  order: 1;
  margin-right: 20px;
}

.header-display-desktop .header-actions.header-actions--right {
  order: 1;
}

Support me by pressing 👍  or marking as solution if this useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources