Shopify themes, liquid, logos, and UX
Hi All
I would like to make the announcement bar height smaller - at the moment it is too big for my style.
Is it possible to do this?
Site = www.hakamount.co.uk pass = ceesti
Cheers
haka
Solved! Go to the solution
This is an accepted solution.
@hakamount I developed some code for you to fix it in 20 seconds & also have full control:
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
.announcement-bar__message {
padding: 5px 0 !important;
font-size: 12px !important;
}
@media (max-width: 767px){
.announcement-bar__message {
font-size: 10px !important;
}
}
12px = font size of the announcement text on desktop/large devices.
10px = font size of the announcement text on mobile/smaller devices.
You can customize to your liking.
Let me know if it works for you, I'll be happy to assist further if you need.
Kind regards,
Diego
Hello Haka,
From your theme dashboard choose edit code from theme actions.
Scroll down to assets folder, choose
theme.scss.liquid
Press ctrl + f and , then put this text to search it:
.announcement-bar__message
then replace 2 with 4
this should reduce your announcement-bar height
Thanks for help. Working fine
Hey @hakamount,
Your Announcement bar height is perfect. Because header and announcement bar colors are the same therefore it looks like hight is high.
please add the following code at the bottom of your assets/theme.scss.liquid file.
.announcement-bar {
border-bottom: 1px solid white;
}
This will put a separator link between announcement bar and header.
Thanks!
This is an accepted solution.
@hakamount I developed some code for you to fix it in 20 seconds & also have full control:
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
.announcement-bar__message {
padding: 5px 0 !important;
font-size: 12px !important;
}
@media (max-width: 767px){
.announcement-bar__message {
font-size: 10px !important;
}
}
12px = font size of the announcement text on desktop/large devices.
10px = font size of the announcement text on mobile/smaller devices.
You can customize to your liking.
Let me know if it works for you, I'll be happy to assist further if you need.
Kind regards,
Diego
Diego - thank you, this solution worked great.
Thank you to others who also contributed, it is appreciated.
Diego,
Great piece of code. The first part for desktop worked for me but the second part does not edit the mobile version ?
Hi,
I do not have that asset listed. could the announcement bar be titled something else?
Hi Diego, I am using the Dawn theme and it doesnt appear to have a theme.css.liquid file - do you have a solution for this theme also?
Hi! I am using the same theme! Copy and paste the code at the bottom of the base.css file! It will do the trick!
Hi, I need to remove the top one with red bar, please assist. thanks
@BestX Please create a new question for the sake of organization, people will be able to assist you faster like this.
Thank you
New to community, when posting new questions do I have to attention someone? thanks
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024