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]

@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

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

[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