Solved

Dawn 12 Theme - Header Size

Nik11
Tourist
9 0 3

Hi, 

Can someone please help me figure out how to change the size of the header & announcement bar. I would like for both of them to be thinner, on desktop and mobile.

 

Nik11_0-1705945832229.png

 

These are the current settings for the header:

Nik11_1-1705945885491.png

 

Thank you very much in advance 🙂 

 

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
5122 1221 1494

This is an accepted solution.

Thanks for the info, Do you mean like this?

Made4uoRibe_0-1705953870744.png

i already take all out the padding. But if you like to make it more you need to lesser the logo. 

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 "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:

 

.announcement-bar__message.h5 {
    min-height: 2rem;
    padding-bottom: 0px;
    padding-top: 8px;
}

.header__heading-link {
    padding: 0 .75rem;
}
.header {
    padding: 0px 10px !important;
}

 

And Save.

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 4 (4)

Made4uo-Ribe
Shopify Partner
5122 1221 1494

Hi @Nik11 

Would you mind to share your store URL? Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Nik11
Tourist
9 0 3

Sure 🙂 here it is: www.romapetsboutique.com

Thanks!

Made4uo-Ribe
Shopify Partner
5122 1221 1494

This is an accepted solution.

Thanks for the info, Do you mean like this?

Made4uoRibe_0-1705953870744.png

i already take all out the padding. But if you like to make it more you need to lesser the logo. 

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 "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:

 

.announcement-bar__message.h5 {
    min-height: 2rem;
    padding-bottom: 0px;
    padding-top: 8px;
}

.header__heading-link {
    padding: 0 .75rem;
}
.header {
    padding: 0px 10px !important;
}

 

And Save.

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Nik11
Tourist
9 0 3

Done! Simple copy/paste and It worked!! 😄 Thank you so much!!