How to display site logo without top padding


#1

Hello,

I tried to remove that padding in top of the logo area but couldnt figure out how. Logo max height is 223px, I tried to change in css site-header padding to 0 but didnt help.description


#2

Hi,

please to post the URL of your site here


#3

that site is not published yet…


#4

Okay, so I will use the demo site to inspect the element and perhaps this is the css code that you need:

.site-header {
    padding-top: 10px;
}

#5

Thanks Awan! Here is my customized css for header:
.site-header {
padding-top: 5px! important;
}
.site-branding {
padding-left: initial! important;
padding-right: initial! important;
margin-bottom: 5px;
}
.site-header .container {
display: initial! important;
}

Suggested code:
.site-header {
padding-top: 5px! important;}
works only if I remove .site-header .container { display: initial! important;}
But I need it to keep header full width or is there another trick to make it full width? I tried width: 100% but this did`nt help either…


#6

Did you mean that you want to make the header full width? try this:

.site-header .container {
    margin: 0 10px;
    width: 100%;
}

#7

unfortunately width 100% is not working, will leave some margins both side…When I add display initial, then getting full width but can’t reduce top margin ?


#8

Hmm its strange, Its working in demo site.

Maybe you can upload your site and share the site URL here so I can help you further


#9

I found an option to change top padding also under “customize - menu style - top bar padding” in case somebody is struggling with that.
But still can´t get header image as full width. Here is my function and css file, I tried to change the main theme with adding this to editor
.site-header .container {
width: 100%;
}
but did not work for me…