Home>Support>How To Remove Left and Right White Space Around Logo? (Vantage Premium)

How To Remove Left and Right White Space Around Logo? (Vantage Premium)

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).

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 5 months ago Andrew Misplon Hi, I Work Here

    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;
    }
  2. 7 years, 5 months ago Sunsmile

    Thank you so much, Andrew! This works perfectly!

  3. 7 years, 5 months ago Andrew Misplon Hi, I Work Here

    Super, glad we could help.

    • 7 years, 5 months ago direheartbeat

      – 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?

  4. 7 years, 4 months ago Andrew Misplon Hi, I Work Here

    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.

  5. 7 years, 3 months ago AS Cahyono

    thanks Andrew

  6. 7 years, 3 months ago Andrew Misplon Hi, I Work Here

    For sure.

  7. 7 years, 1 month ago Ivan Sonavia

    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

  8. 7 years, 1 month ago Andrew Misplon Hi, I Work Here

    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.

  9. 6 years, 6 months ago HD Karadavut

    Hi,

    after the update i get the white space’s around my logo. How can i resolve these?

    Thank you

    • 6 years, 6 months ago Andrew Misplon Hi, I Work Here

      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

  10. 6 years, 4 months ago robk303

    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

    • 6 years, 4 months ago Andrew Misplon Hi, I Work Here

      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 :)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More