How to lessen space between logo and navigation menu in Dawn Theme?

[yalostore]

Hey!!

I would like to reduce the space between my logo and the navigation menu. I just would like it to be shorter. Im using Dawn Theme.

I attached a screenshot so you can see what im talking about 🙂

Thank you in advance for your help 

[Made4uo-Ribe · Accepted solution]

Hi @yalostore 

Try this one. 

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

a.header__heading-link.link.link--text.focus-inset {
    padding-bottom: 0px;
}
#shopify-section-sections--20972431081768__header > div > header > nav {
    margin-top: 0px !important;
}

• And Save. 
• Result:
• 

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

[yalostore]

thank you so much!!!

This helped me a lot

[Bodeane]

Hi, I have tried this but it doesn't seem to work. In sense theme --> base.css. Nothing happens.

[Made4uo-Ribe]

Hello @Bodeane 

This code is for the one who posted the problem, your store might have a different code. Would you mind to share your store URL? Thanks!

[Bodeane]

Hi, thanks for your quick reply. Hereby my link: https://b805c8.myshopify.com/

[Made4uo-Ribe]

Its password protected. 

[Bodeane]

Made it 1112 for you

[Made4uo-Ribe]

Check this one. 

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:

nav.header__inline-menu {
    margin-top: -10px !important;
}
h1.header__heading a {
    padding-bottom: 0px;
}

And Save. 

Result:

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

[Bodeane]

Thanks it worked!

[Made4uo-Ribe]

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

[Summar]

Hi ! both solutions didn't work for me - can you help? 

summar.co.uk

[Made4uo-Ribe]

Hi @Summar 

Check this one. 

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:

nav.header__inline-menu {
    margin-top: 0px !important;
}

a.header__heading-link.link.link--text.focus-inset {
    padding-bottom: 0px !important;
}

And Save. 

Result:

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

[Bogdan777]

Hello. Can you please help me. I have a problem with the mobile version of the menu. The navigation menu should be closer to the logo, because the distance between the logo and the menu is too large. (See screenshot) - https://mi6studio.myshopify.com/

 

[DTours]

Hi @Made4uo-Ribe 

I'm facing the same issue in my shop, however it is on the mobile version between the logo on the left and the navigation menu. Do you know how I could solve this (refresh theme)? 

Thank you! 

[Made4uo-Ribe]

Hello @DTours 

Can i check your store? Would you mind to share your store URL? Thanks!

[DTours]

Hi @Made4uo-Ribe, 

thank you for the repy! 

The URL is dunk-tours.de and the password is "topnewyork". I'm also attaching a picture to visualize the issue:

Thank you! 

[Made4uo-Ribe]

Thanks for the info, do you mean like this? 

if it is check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media screen and (max-width: 750px) {
    .header-wrapper .header {
        grid-template-columns: auto 1fr;
    }
}

And Save. 

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

[DTours]

Hi @Made4uo-Ribe, 

that's exactly it, thank you so much!!! 🙂 

Would it also be possible to push the header a little bit up on the mobile view?

[Made4uo-Ribe]

Sure, replace with this code then. 

@media screen and (max-width: 750px) {
    .header-wrapper .header {
        grid-template-columns: auto 1fr;
    }
    a.header__heading-link.link.link--text.focus-inset {
    padding-bottom: 18px;
    }
}

And Save. 

Result:

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

[DTours]

This one worked as well, just changed the padding a little bit 🙂 Thanks again for your help! 

I had opened another thread about this issue but did not get any working codes. If it helps you somehow, you could post the code there and I will mark your reply as solution 🙂 Here is the thread:

https://community.shopify.com/c/shopify-design/navigation-and-logo-all-the-way-to-the-left-refresh-t...