How to display site logo without top padding



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



please to post the URL of your site here


that site is not published yet…


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;


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…


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

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


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 ?


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


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…