make announcement bar height smaller dawn

[ads18922]

hello, i want to make the height of my announcement bar smaller

this is my website, i want it to look like this:

my website is marcomontesi.com , theme is dawn

[topnewyork]

Hello, @ads18922 
1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom

.page-width.utility-bar__grid {
    padding: 0;
    margin: 0;
    height: 38px !important;
    display: flex !important;
    align-items: center;
}

p.announcement-bar__message.h5{
  font-weight: 700 !important;
  font-size: 15px !important;
}

 Thanks!

[DaisyVo · Accepted solution]

Hi @ads18922 ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

.announcement-bar .slider-button {
    height: 30px !important;
}
p.announcement-bar__message.h5 {
    padding: 0;
    min-height: unset !important;
}

Here is the result:

Please let me know if it works!

Best,

Daisy

[Made4uo-Ribe]

Hi @ads18922 

Do you like the font sizes to change or make the back ground smaller width like the example? If only the font try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.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:

p.announcement-bar__message.h5 {
    font-size: 1rem !important;
    font-weight: 900 !important;
}

• And Save.
• Result:
• 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!