Adjust padding between announcement bar and logo in Dawn theme

Store Design
,
1

Hi community

I am looking for a way to bring the top of my logo closer to the announcement bar

The attached photo has all the elements highlighted to illustrate my issue

Screenshot 2024-04-17 at 5.31.47 pm.png
Screenshot 2024-04-17 at 5.31.47 pm.png512×259 21.1 KB

I have already used this code from a similar thread:

.header__heading-link {padding: 0;}

However, it doesn’t seem to be close enough, especially when compared to how the logo sits above the menu links

I also have another code in place to make the padding between logo and menu links zero

Thank you sincerely in advance

2

Hello, @dealeroffruit

Can you share your store url?

3

Hello @dealeroffruit ,
I can see from the image that you’ve already reduced the padding around the logo and the menu links. To bring the top of your logo closer to the announcement bar, you can target the margin above the logo. Here’s some CSS you can try:

.header__heading {
  margin-top: [desired amount in pixels];
}

Replace [desired amount in pixels] with the amount of space you want between the announcement bar and the logo. You can experiment with different values until you find one that looks good to you.

Here are some additional things to keep in mind:

  • If you’re using a website builder or CMS, there may be a way to adjust the logo spacing through the user interface without having to edit code.
  • Be sure to test your changes on all devices (desktop, tablet, and mobile) to make sure the logo looks good at all screen sizes.
4

Hello,

I am San from MS Web Designer.

I would love to help you with your concern.

-Kindly Provide your Store URL,

Note: If your store is protected with a ‘store Font password,’ please Send it here.

If you have any concerns, feel free to ask me!

Regards,
San

5

Hello @dealeroffruit ,

I understand you are looking to make the padding space between the announcement bar & logo small.

Please check in your theme customizer , is the Top padding is set to 0px or not https://prnt.sc/awxSrYhi_jmN

If padding/margin still is not set as per your needs, then please add the below mentioned code in base.css file and save.

sticky-header.header-wrapper.color-scheme-1.gradient {
padding-top: 0px;
margin-top: -10px;
}

I hope it helps.

Thank you.

6

Thank you very much Anshul for fixing my problem