How can I reduce header white space without resizing my logo?

[CrazyBobble]

Does anyone know how to reduce the amount of white space in the header? I don't want to make my logo smaller to make the height of the header smaller.

I'm not very experienced so some help would be much appreciated. I'm using the symmetry theme.

Thanks.

[dmwwebartisan]

@CrazyBobble 

Please share store URL.

Thanks!

[CrazyBobble]

It's crazybobble.co.uk

Thanks.

[suyash1]

@CrazyBobble- if you want something like in given screenshot then please add this css to the very end of styles.css file and check

.pageheader .logo {
    padding: 2px 0;
}

[CrazyBobble]

Hi, yeah this is what i mean. What would i change to leave a little bit more white space? This is reduced a bit too much.

Thanks.

[suyash1 · Accepted solution]

@CrazyBobble- change the number 2 in above code to the number you want and check

[AlexBrowe2]

@suyash1 @suyash1 @suyash1 

Hello🙂

Please could you help me to make the logo appear on my page as it is in the image that I send you?

The problem is that if I increase the size of the logo, the size of the header also increases. Because the header keeps the logo inside, but we want them to be independent. In order to increase the size of the logo so that it protrudes a bit from the header.

What is the code and where do we have to modify to make the size of the logo and header independent?

Our page is: https://kongpods.com/

Thank you

[suyash1]

@AlexBrowe2- please try this code, adjust number as per need and you can increase logo size from customize options

@media screen and (min-width:749px){
header__logo-image{position: absolute;left: -50px;}
}

[AlexBrowe2]

Hello @suyash1 @suyash1 @suyash1 

I have sent you an image, where should I put the code? Do we have to add or replace with another code?

Thanks

[suyash1]

@AlexBrowe2-  please add given code in theme.css file and check, sorry I forgot to mention it

[AlexBrowe2]

Hello, please help

I have already added it to the end of theme.css

I want to reduce the height of the header, and that the size of the logo does not change

[AlexBrowe2]

Hello, please help @suyash1 @suyash1 @suyash1 

I have already added it to the end of theme.css

I want to reduce the height of the header, and that the size of the logo does not change

[suyash1]

@AlexBrowe2- sorry again, my bad, please remvoe previous code and ad this, it will make it like screenshot I gave you

@media screen and (min-width:750px){
.header__logo-image{position: absolute;left: -50px;}
}

[AlexBrowe2]

@suyash1 @suyash1 @suyash1 

Now it looks like this

Logo needs to be raised above to fit in the center of the header

Thanks

[suyash1]

@AlexBrowe2- add top:-20px to it, so it becomes

.header__logo-image {
    position: absolute;
    left: -50px;
    top: -20px;
}

[AlexBrowe2]

@suyash1 @suyash1 @suyash1 

Only 2 things are missing:

1) Overlay the logo on top of the announcement bar, so that the head of the logo can be seen well and completely.

2) The same but in the mobile version, nothing has changed with this code

[suyash1]

@AlexBrowe2- remove that media query part to make it work on mobile , so instead of

@media screen and (min-width:750px){
.header__logo-image {
    position: absolute;
    left: -50px;
    top: -50px;
}
}

it will be this only, adjust numbers as per your need to make logo at position you want, you will need to adjust them as per need

.header__logo-image {
    position: absolute;
    left: -50px;
    top: -20px;
}

[AlexBrowe2]

@suyash1 

Thank you very much for your help, there is only one detail missing to make it look good

Overlay the logo on the announcement bar to make it look complete, it has the head cut off

[suyash1]

@AlexBrowe2- checking, somehow css not working on it

[suyash1]

@AlexBrowe2- please add this css too

#shopify-section-header{z-index: 7;}

[AlexBrowe2]

@suyash1 

Don't work, I'm doing something wrong

[suyash1]

@AlexBrowe2- no you did correct, just need !important, so it becomes

#shopify-section-header {
    z-index: 7 !important;
}

[AlexBrowe2]

@suyash1 

Thank you so much

Can you solve the following? Add a little more space or blank margin in the indicated area

[suyash1]

@AlexBrowe2- add this css and check, adjust number as per need

.shopify-section--apps .shopify-app-block{
    margin-bottom: 30px;
}

[AlexBrowe2]

@suyash1 

Thanks

How you could change the following: "Estándar 3 a 4 días laborables" and "Exprés 1 a 2 días laborables"

From the settings configuration I cannot

[suyash1]

@AlexBrowe2- hi, please check in customize settings or language settings in online store->themes->actions

actually we do not get shopify checkout file to edit

[AlexBrowe2]

Hello @suyash1 

Only in the mobile version and the "collection" page, this appears that we want to move down so that it is located below the photo and not above.

How can we do it?

Thanks

[suyash1]

@AlexBrowe2- please share this page link

[AlexBrowe2]

Hello @suyash1 

https://kongpods.com/collections/x

But you have to see it from the mobile version

Thanks

[suyash1]

@AlexBrowe2- this will need multiple css code settings and can affect other pages too, hence I recommend not to do it

[suyash1]

Can you please check language settings?

[AlexBrowe2]

@suyash1 @suyash1 @suyash1 

In the mobile version nothing has changed with the code

Now it looks like this (desktop version)

Logo needs to be raised above to fit in the center of the header

Thanks