how to change the heights on the Announcement bar on my web site ?

Store Design
, , ,
1

www.mymawduh.com

2
  1. In the code editor, find and open the theme.scss.liquid file under the “Assets” directory.
  2. Scroll to the bottom of the file or wherever you prefer to add custom CSS code.
  3. Add the following CSS code to adjust the height of the announcement bar:
.site-header__announcement {
  height: 50px; /* Adjust the height value as needed */
  line-height: 50px; /* Adjust the line-height value as needed */
}
​
3

Hi @MyMawduh ,

I understand that you want to change the heights of the announcement bar, do you mind to tell specific which area you want to change? or do you mean the the header height?

Thanks!

4

I can’t find that file in this theme. am using Sense.

Screenshot 2023-06-07 235008.png
Screenshot 2023-06-07 235008.png287Ă—450 9.82 KB

5

I have an announcement bar on now. you can visit the site and check it out.
www.mymawduh.com

Screenshot 2023-06-07 235312.png
Screenshot 2023-06-07 235312.png1562Ă—866 179 KB

1 Like
6

Thank you for the information.

Try this.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “theme.css, styles.css or base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  • And Save.
.announcement-bar.color-accent-1.gradient {
    height: 80px;
}