Change color on divider, and move social Icons over to left (and edit the color on those too)

Topic summary

A user seeks to customize their Shopify store header by:

  1. Changing the divider color beneath social icons
  2. Repositioning social icons to the left side
  3. Modifying social icon colors

The user clarifies they need to modify the divider specifically, not the overall header color, and notes these changes likely require custom code.

Solution provided:
A PageFly support representative shares CSS code to implement these changes:

  • Navigate to Online Store → Theme → Edit code
  • Locate the base.css file
  • Add custom CSS targeting .SiteHeader, .toolbar__content, and .toolbar__item path elements
  • The code adjusts justification (moving icons left) and applies color changes (red used as example)

The user confirms the solution works successfully.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.

How can I:

  1. change the color on the divider in the header (under the social icons) (see attached)

  2. Move the social Icons over to left, and have them in another color?

https://anne-margrethe-art.myshopify.com/

Thanks :slightly_smiling_face:

It is not the header color that needs to be changed.. it is the divider. There is no way you can change it without code i guess…

Same for changing the colors on the Social icons, and moving them to the left.

Hi @sondrehille

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

header#SiteHeader {

box-shadow: 0 0 1px red !important;

}

.toolbar__content {

justify-content: flex-start !important;

}

.toolbar__item path {

color: red !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

wow . thank you so much! Really :grinning_face_with_smiling_eyes: