Solved

How to align the menu to the top of logo instead of the centre of it

Cozytown
Excursionist
18 0 3

I was trying to get my header image really large like what's shown below — i couldn't do it with code so I eventually found a workaround where I made the transparent space of my logo the height that I wanted the header. It worked but now the menu is aligned to the centre of the massive tall logo. How can I shift the menu up so it's in line with the solid part of the logo?

 

Or alternately if there's a way to just make the header taller with code then even better!

 

I'm using the Dawn theme

 

Cozytown_0-1712238268778.png

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2138 614 488

This is an accepted solution.

Hey @Cozytown,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-localizations {
    height: 40vh !important;
    align-items: flex-start !important;
}

.header__icons.header__icons--localization.header-localization,
nav.header__inline-menu,
header-drawer {
    padding-top: 20px !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1712240707356.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 8 (8)

ThePrimeWeb
Shopify Partner
2138 614 488

Hey @Cozytown,

 

Can you share the link to your store?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Cozytown
Excursionist
18 0 3
ThePrimeWeb
Shopify Partner
2138 614 488

Is it better if you uploaded the image with proper size and then we change the height with code instead? 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Cozytown
Excursionist
18 0 3

Yeah I have a feeling that might be more straightforward if it's possible!

ThePrimeWeb
Shopify Partner
2138 614 488

Definitely possible, could you replace the image please? That way I can give you the proper code.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Cozytown
Excursionist
18 0 3

Done!

ThePrimeWeb
Shopify Partner
2138 614 488

This is an accepted solution.

Hey @Cozytown,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-localizations {
    height: 40vh !important;
    align-items: flex-start !important;
}

.header__icons.header__icons--localization.header-localization,
nav.header__inline-menu,
header-drawer {
    padding-top: 20px !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1712240707356.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Cozytown
Excursionist
18 0 3

Amazing!! That worked, thank you so much!