Hi All,
I could now find the solution how to make a size of announcement bar smaller, at the moment it is too big for my style.
Topic summary
A user seeks to reduce the height of their website’s announcement bar, which appears too large for their design preferences.
Solution Provided:
- Navigate to theme code editor and locate the
base.cssfile - Add custom CSS targeting the utility bar class
- The code sets a fixed height of 35px and uses flexbox alignment to vertically center content
CSS Implementation:
.utility-bar.color-scheme-3.gradient.utility-bar--bottom-border {
height: 35px !important;
display: flex !important;
align-items: center !important;
}
Outcome:
The solution was accepted by the original poster, successfully resolving the sizing issue. Visual examples were provided showing the before and after states of the announcement bar.
@Daria18 Hope you are doing well.
Could you please share your store URL? so can check and guide you accordingly
Hi @Daria18 , can you share store URL?
Hi @Daria18
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
Hi @Daria18
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
.utility-bar.color-scheme-3.gradient.utility-bar--bottom-border {
height: 35px !important;
display: flex !important;
align-items: center !important;
}
Result:
Best,
Liz
Thank you