site-logo header-edit-box white space

[andyleighton]

Hi,

There is too much white space between my site logo and the menu bar, what code would I use in the additional.css file to reduce this?

I did try this:
#header.site-logo{padding:22px 10px 7px 10px;background:transparent;position:relative;text-align:left}

but didnt seem to do anything!

[Wayne Luke]

The header has a minimum height of 104 pixels specified as well. You can change this with the header_height style variable in the AdminCP.

[andyleighton]

where can I find the header_height style variable in the AdminCP, it didn't come up when I searched in templates?

cheers

[In Omnibus]

where can I find the header_height style variable in the AdminCP, it didn't come up when I searched in templates?

cheers

You can find it in the Style Manager under Edit Stylevars in the Drop-Down Menu for each style.

Or you can use CSS.

#header {
height: 104px !important;
}

[andyleighton]

mmmm neither of those two suggestions altered the height of the header,( increase or decrease) maybe its the padding in green I need to reduce the height of?

[In Omnibus]

The logo itself has no margin or padding by default. You may achieve the desired results by adjusting the header cell.

#header .header-cell {
margin: 0;
padding: 0;
}

You will obviously not want the values to be zero. Adjust them as necessary.

[andyleighton]

Thanks Omnibus, but that didnt change anything either unfortunately

By using Chrome 'inspect' I managed to change the padding px in site-logo header-edit-box, and it worked perfectly ...

but when I put the same altered code from Chrome 'inspect' into css_additional.css the default padding stays the same.

#header .site-logo {
padding: 22px 10px 10px 10px;
background: transparent;
position: relative;
text-align: left;





Any ideas why the same Chrome 'inspect' code that changes the site-logo padding doesnt work in css_additional.css? (could be why the previous suggestions didnt work either)

[In Omnibus]

I'm just speculating here but most browsers have a default CSS of their own which is why CSS resets were created. I don't use Chrome regularly but I think Wayne Luke does so he could probably answer that question for you.

[Wayne Luke]

CSS is very very specific.. It is completely designed around specificity. What is the exact CSS that you're applying to the element?

For example the code in the first post is incorrect. There is no element in the system with both the #header ID and the .site-logo class. One is actually the child of the other. So this is broken:

#header.site-logo{padding:22px 10px 7px 10px;background:transparent;position:relative;text-align:left}

Instead, you need to find the element with the #header ID and then the child of that element with the .site-logo class. That code would look like this:

#header .site-logo{padding:22px 10px 7px 10px;background:transparent;position:relative;text-align:left}

Note the space between the #header and .site-logo. That space is very important in the scheme of things.

[andyleighton]

Still cant get it to do anything, hard to believe its so difficult to adjust the green padding under the logo image.

this is the code I tried from 'Chrome Insert' in css_additional.css: ( the 8px is the new adjustment)

#header .site-logo {
padding: 22px 10px 8px 10px;
}



Any final code possibilities to reduce the green padding between the logo and menubar?

Cheers!

[In Omnibus]

Still cant get it to do anything, hard to believe its so difficult to adjust the green padding under the logo image.

this is the code I tried from 'Chrome Insert' in css_additional.css: ( the 8px is the new adjustment)

#header .site-logo {
padding: 22px 10px 8px 10px;
}



Any final code possibilities to reduce the green padding between the logo and menubar?

Cheers!

Are you positive the image itself doesn't have transparent white space? I'm asking this because I just tested a header logo image with 0 padding and it has no padding on the bottom between it and the navigation toolbar.

[Wayne Luke]

Unfortunately, your cropped image shows nothing that would help us solve your problem. What is the computed CSS for the logo and what is the computed CSS for the header element?

Heck, even a link to the site with the problem would help. Probably the most useful.

This code works for me:

#header .site-logo {
    padding: 22px 10px 8px 10px;
    background: transparent;
    position: relative;
    text-align: left;
}

All I can guess is that some other CSS in your site is overriding this change.

[andyleighton]

All I can guess is that some other CSS in your site is overriding this change.

I think you might be right if the code I tried works for you
Site is https://tokyoposts.com

(just as a side query, while looking for other css thats overriding the new code , I see there is various css code in the additional.css of the different themes, I didnt put it in there, I guess that is a default for some themes?)

[In Omnibus]

Your default CSS is this:

div.site-logo.header-edit-box {
padding: 22px 10px 26px 10px;
}

It is the 26px bottom-padding that is causing the issue.

You can adjust that number to any value using either the full CSS above or

div.site-logo.header-edit-box {
padding-bottom: 26px;
}

You may or may not have to use !important to override the default CSS. I didn't in my testing.

If you do, then use

div.site-logo.header-edit-box {
padding-bottom: 26px !important;
}

[andyleighton]

Brilliant! thanks Omnibus, that works great with the !important added

Much appreciated! and thanks also Wayne for your help over the last week,

cheers