Solved

How do I raise the announcement bar that's blocking icons?

HiciZisi
Excursionist
23 0 10

Hey guys i edit the announcement bar in my base.css 

How can i get the announcement bar up?

It blocks the icons 😞 

HiciZisi_0-1659220273549.jpeg

 

 

I use this code: 

 

 

 

 

 

.announcement-bar {
	background-color: #263644!important;
    float: left;
    width: 100%;
    position: fixed
}

 

 

 

 

Thanks

 

 

 
Accepted Solution (1)

ZestardTech
Shopify Expert
5496 989 1315

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >base.css and paste this at the bottom of the file:

@media only screen and (max-width: 990px){
header.header.header--middle-left.page-width.header--has-menu {
padding-top: 3%;
}

p.announcement-bar__message.h5 {
padding: 1%;
}
}
@media only screen and (max-width: 769px){
header.header.header--middle-left.page-width.header--has-menu {
padding-top: 7%;
}

p.announcement-bar__message.h5 {
padding: 1%;
}
}

Screenshot :- https://prnt.sc/itrvZoDyzOko

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 3 (3)

ZestardTech
Shopify Expert
5496 989 1315

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >base.css and paste this at the bottom of the file:

@media only screen and (max-width: 990px){
header.header.header--middle-left.page-width.header--has-menu {
padding-top: 3%;
}

p.announcement-bar__message.h5 {
padding: 1%;
}
}
@media only screen and (max-width: 769px){
header.header.header--middle-left.page-width.header--has-menu {
padding-top: 7%;
}

p.announcement-bar__message.h5 {
padding: 1%;
}
}

Screenshot :- https://prnt.sc/itrvZoDyzOko

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
HiciZisi
Excursionist
23 0 10

Thank u its work! 

ZestardTech
Shopify Expert
5496 989 1315

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing