Solved

Dawn theme: move social media icons located in Announcement Bar

Bocker503
Tourist
9 0 0

I have coded a little bit and moved my social media icons to the announcement bar. In one version I have managed to have 3 icons stacked on the left hand side 

on both desktop and mobile.

IMG_1627.jpeg

 

On another version I managed to unstack the 3 icons on desktop and they show horizontally BUT on mobile view you can only see the first icon and the rest line up VERTICALLY and are covered up. (I increased the size of the announcement bar to include all 3 icons but obviously the bar was too wide then).

IMG_1625.jpeg

 

Can I somehow add custom CSS to the announcement bar section to influence the social media icons to line up horizontally or not stack up? 

I have already added custom css to the announcement bar section 

 

.list-social {
position: absolute;
left: 28px;
color: white;
padding-left: 15px;}

I think that basically put the icons to the left side of the bar and indented them a bit to the right. 

here it is without custom CSS 

IMG_1626.jpeg

 

 

Accepted Solution (1)
AnneLuo
Shopify Partner
529 107 105

This is an accepted solution.

You only need to add one line of code

.list-social {
  display: flex;
}

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

View solution in original post

Replies 6 (6)

AnneLuo
Shopify Partner
529 107 105

Hello, @Bocker503 

Can you share your store url?

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
Bocker503
Tourist
9 0 0
AnneLuo
Shopify Partner
529 107 105

This is an accepted solution.

You only need to add one line of code

.list-social {
  display: flex;
}

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
Bocker503
Tourist
9 0 0

MUCH LOVE ❤️ 

AnneLuo
Shopify Partner
529 107 105

Thank you for your reply. I'm glad to hear that the solution worked well for you.
If you require any more help, please don't hesitate to reach out.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
Bocker503
Tourist
9 0 0

I do have one more thing I need help with. On desktop view my third image banner is spaced really far from the second image banner. How can I fix this? To have even spacing between all three.