Minimum theme - move social links to announcement bar and float left

wdonkin
Tourist
3 0 2

Hello!

I have been successful moving social links to announcement bar by removing/replacing code in header.liquid

I also was successful enlarging text and centering the message by adding css to theme.scss.liquid, but social icons centered with it

I now need to have social links float left.

Thanks for any insight! Please let me know if you need more info/access

 

0 Likes
dmwwebartisan
Shopify Partner
4570 1028 1321

@wdonkin 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
wdonkin
Tourist
3 0 2

Thank you.

It's currently https://gretchensgallery.myshopify.com/

pw: feebah

dmwwebartisan
Shopify Partner
4570 1028 1321

@wdonkin 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (min-width: 769px){
.header-bar__right { width: 22% !important; }
.header-bar__module--list { width: 30% !important; }
.header-bar__message { width: 68% !important; }
}

 

Let me know if this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
wdonkin
Tourist
3 0 2

It sort of works, in that the social media icons are aligned to the left. I would like to have the message centered and larger. I left the-size line, but it's not quite centered.  I'd love your suggestions to achieve that. The added code now is as follows:

}
.header-bar .header-bar__module.header-bar__message{
font-size: 22px !important;
}
@_media screen and (min-width: 769px){
.header-bar__right { width: 22% !important; }
.header-bar__module--list { width: 30% !important; }
.header-bar__message { width: 68% !important; }
}

 

Thank you so much!