Solved

Adjust padding between announcement bar and logo in Dawn theme

dealeroffruit
New Member
6 0 0

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

 

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

Accepted Solution (1)

Anshul_arora
Navigator
369 104 72

This is an accepted solution.

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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 5 (5)

AnneLuo
Shopify Partner
424 87 80

Hello, @dealeroffruit 

Can you share your store url?

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee

oscprofessional
Shopify Partner
15896 2377 3082

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.

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

SAN_MSWEB
Shopify Expert
1086 130 136

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

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Anshul_arora
Navigator
369 104 72

This is an accepted solution.

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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
dealeroffruit
New Member
6 0 0

Thank you very much Anshul for fixing my problem