FROM CACHE - en_header

Announcement Bar - Mobile

Solved
Adam171
Tourist
11 0 5

Hello There!

My announcement bar is one line when viewing on desktop, and 2 on mobile but I feel like it could be reduced to one on mobile.  Is there a way to make is smaller for mobile only so "Free Shipping" is on the same line as "Menu" and "Cart"?


I've tried to play around with the theme.scss code and have the below, but nothing seems to make an impact.

}
.announcement-bar__message {
display: block;
font-weight: $headerFontWeight;
padding: 0px ;
margin: 0;
}
.announcement-bar__message {
padding: 0px 0 !important;
font-size: 12px !important;
}

Desktop

Adam171_0-1620245383200.png

 

Mobile

Adam171_1-1620245626365.png

 

 

Thanks!

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
34392 3444 11266

This is an accepted solution.

@Adam171 

thanks for the store URL, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 768px) {
.announcement-bar--mobile {padding-top: 0;padding-bottom: 0;margin-bottom: -20px;position: relative;top: 5px;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 7 (7)
KetanKumar
Shopify Partner
34392 3444 11266

@Adam171 


Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AlexEffron
Shopify Partner
2683 387 1050

Hello,

Welcome to the shopify Community.
I read your problem and it seems that I need to analyze your website to provide solution here.
Would you please share your website URL and if your website is password protected then also provide password.

Adam171
Tourist
11 0 5

Hello

My website is www.hausofstyle.co.uk

Thank you

 

 

KetanKumar
Shopify Partner
34392 3444 11266

This is an accepted solution.

@Adam171 

thanks for the store URL, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 768px) {
.announcement-bar--mobile {padding-top: 0;padding-bottom: 0;margin-bottom: -20px;position: relative;top: 5px;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Adam171
Tourist
11 0 5

Amazing!  That worked perfectly!  Thank you so much!

Adam171
Tourist
11 0 5

Sorry - just noticed something.

Although my announcement bar is now fixed, my "Shop Decor" button is now over hanging my image,

Is it possible to move my "Shop Decor" button slightly higher so it is within my slideshow, without adjusting the announcement bar? 

Thanks!

Adam171_0-1620308017007.png

 

KetanKumar
Shopify Partner
34392 3444 11266

@Adam171 

this is fine?

KetanKumar_0-1620323495069.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing