Solved

Make header wider and smaller

Lilboris
Visitor
3 0 0

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

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
1089 286 220

This is an accepted solution.

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.

ThePrimeWeb_0-1707219082611.jpeg

 

 

 

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), 

ThePrimeWeb_1-1707219116542.png

 

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

ThePrimeWeb_2-1707219161511.png

 

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.

ThePrimeWeb_3-1707219263113.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

View solution in original post

Replies 2 (2)

ThePrimeWeb
Shopify Partner
1089 286 220

This is an accepted solution.

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.

ThePrimeWeb_0-1707219082611.jpeg

 

 

 

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), 

ThePrimeWeb_1-1707219116542.png

 

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

ThePrimeWeb_2-1707219161511.png

 

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.

ThePrimeWeb_3-1707219263113.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
Lilboris
Visitor
3 0 0

Thanks you so much! 🙂 It worked wonders, both things.