How can I adjust the width and size of my website header?

Lilboris · ‎02-06-2024

Hello!

I'm trying to make the header wider so the logo and cart buttons are more to the edges. Right now on all PCs its all so cramped, even the product pages feels cramped. Anyone knows how to fix this? 🙂

I would also like to make the header smaller but keeping the logo size or even make the logo bigger. Right now the header is very "fat", Any ideas?

Thanks alot in advance!
Website: www.hundben.se
Pass: hej123

ThePrimeWeb · ‎02-06-2024

Hey @Lilboris,

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.

This will increase the page's width (Change the value 1660 to a higher number if you need to use more space)

<style>
:root {
    --page-width: 1660px !important;
}
</style>

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

As for the logo, The logo itself is the reason the header has such a height.

See the size of the logo (170 x 120),

Without the logo, the size of the header is like this:

You should remove unnecessary whitespace in the logo, basically as close as it can get to all corners. Just crop the image. The logo will look bigger then and also take up less space.

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

ThePrimeWeb · ‎02-06-2024