I uploaded the logo that’s sized 1,080×300. There was lots of white space around the logo even after I set header padding to zero through Customize->General->Header Padding.
I managed to remove top and bottom white space by searching through this forum and adding the following code snippet to Custom CSS… However, I can’t get rid of the left and right white space!
header#masthead hgroup {
padding-bottom: 0 !important;
padding-top: 0 !important;
padding-left: 0 !important;
padding-right:0 !important;
}
.main-navigation {
margin-top: -9px !important;
}
There is still white space on left and right of the logo! I’m using the boxed layout.
Please help!
The URL of the site is http://blog.tcboost.com/ (username testing, password testing123).
Hi
This is most likely the Custom CSS you need to run a full width header logo:
/* Full header logo */ header#masthead { padding: 0 !important; } header#masthead hgroup { padding: 0 !important; } header#masthead hgroup .logo img { width: 1080px; } .main-navigation { margin: 0 !important; } body.responsive header#masthead hgroup .support-text, body.responsive header#masthead hgroup #header-sidebar { display: none !important; }Thank you so much, Andrew! This works perfectly!
Super, glad we could help.
– I’m having the same problem and got as far as the original poster did, but the supplied css didn’t fix the issue.
– My image is 1920×274. Smaller images displayed the same though.
– http://www.furryskiweekend.com
– (A as side note the interface to change the header padding doesn’t appear to be working correctly. It would fix it in the preview window, but when I saved and reloaded the site nothing changed)
Any suggestions on how to fix and/or approach this issue?
Hi direheartbeat
The CSS above is only applicable to the boxed layout of Vantage. Please open a new thread for your query and I’ll be happy to help.
thanks Andrew
For sure.
Hi,
I uploaded the logo that’s sized 1,080×315
I still can’t get rid the white space on right and left of the logo.
Already inputted the Custom CSS to run a full width header logo. Nope, it still have the white space.
My website: http://rahasiaorgas.me
Thank you for the great theme
As of 2.2.2 this snippet won’t be effective. Please now use:
/* Full header logo */ header#masthead { padding: 0 !important; } header#masthead .hgroup { padding: 0 !important; } header#masthead .hgroup .logo img { width: 1080px; } .main-navigation { margin: 0 !important; } body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar { display: none !important; }hgroup was changed from a tag to a div class so a period needs to be added in front of each hgroup mention.
Hi,
after the update i get the white space’s around my logo. How can i resolve these?
Thank you
Hi HD
Sorry to hear about the hassle. Please open a new thread: Page: New Thread and let us know here once you have done so. I’ll then jump. If possible, please provide a link to your site.
Thanks
Hi Andrew,
I had tried everything possible in the CSS to get rid of the white spaces on the side, but was unsuccessful. I found this thread and tried the code you posted, but it did not resize my 1080 wide logo… it merely moved it to the left. The size of the logo is still 1010, but now there is white space to the right. I have changed the background color of that area to GREEN so the issue can be easily seen. It is on this page: http://www.gone-adventuring.com
Any suggestions to allow (or force) the logo to expand to 1080?
Cheers,
Rob
Hey Rob
The logo is restricted to 1010px by the logo function in the theme’s setup files. There is unfortunately no quick way around this. Try the following at Appearance > Custom CSS:
/* Full Header Logo - Boxed Layout Bound */ header#masthead { padding: 0 !important; } header#masthead .hgroup { padding: 0 !important; } header#masthead .hgroup .logo img { height: auto; width: 1080px; } header#masthead .hgroup .logo img[style] { padding-top: 0 !important; padding-bottom: 0 !important; } .main-navigation { margin: 0 !important; } body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar { display: none !important; }It will cheat for the last 70px. If this doesn’t work for you, let me know, we could look at a child theme fix. Please open a new thread in that event and post the new thread link here. Thanks :)