[Debut Theme] Header logo and height

Solved
rbelle
Excursionist
31 0 14

Hi,

I would like to know if there is a way to reduce the blue area of the header logo without affecting the centred menu elements?

As it would redirect me to the homepage if I clicked on anywhere within the blue box.

rbelle_0-1619144483676.png

Is there also a way to reduce the header height? I've used this but it did not work.

header ul#SiteNav {
    margin: 0;
}

Here's a preview since the theme isn't live yet: 
https://q9hy8aknp98lpoa5-55306092726.shopifypreview.com

Thank you!

0 Likes
Topbright
Excursionist
21 4 4

This is an accepted solution.

Try it should work

.site-header__logo {
      display: inline-flex;
}

 

rbelle
Excursionist
31 0 14

Hi! That worked perfectly for the logo, thank you so much

Topbright
Excursionist
21 4 4

This is an accepted solution.

Sorry, I didn't notice that you want to change the high too, I checked your code, for that you need to do two changes in CSS.

.site-header__logo {
    margin: 5px 0;  <--- the number of margin and the logo img size will change the header height
}
.site-nav {
    margin: 25px 0;  <--- Remove or set to 0
}
rbelle
Excursionist
31 0 14

No worries, I really appreciate the follow-up.

Everything looks great now thank you so much for your help!