Home>Support>Masthead causes background to peek out

Masthead causes background to peek out

By Steve Walker, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

I am trying to remove the bit of background in the header and masthead where I uploaded the logo.
I am using the premium version of the Vantage theme. Here is my custom CSS.

#page-wrapper {
border: 10px solid #333;
padding-bottom: 50px;  
}
#colophon {
margin-bottom: 0;
}

/* Header */
.main-navigation ul {
text-align: center;
}
.main-navigation ul li {
display: inline-block;
float: none;
}

/* 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;
}

URL: http://www.thecleaninggirlinc.com/

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

  1. 10 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Hi Steve

    Try adding:

    #page-wrapper { margin-top: 0; }
  2. 10 years, 9 months ago Steve Walker

    That didn’t fix it.
    I made a mistake in my original copying of my custom CSS; that padding-bottom and full header logo was me testing if that would solve it. Here is the actual Custom CSS (along with your suggestion) I am using on thecleaninggirlinc.com

    #page-wrapper {
border: 10px solid #333; 
margin-top: 0; }
#colophon {
margin-bottom: 0;
}

/* Header */
.main-navigation ul {
text-align: center;
}
.main-navigation ul li {
display: inline-block;
float: none;
}

.main-navigation ul li a {
padding-top: 20px !important;
padding-bottom: 20px !important;
}

header#masthead.masthead-logo-in-menu .logo {
padding: 0 !important;  
max-height: 60px !important;
}
  3. 10 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Sorry, I’m not really following what’s happening now. Are you adding the background as an image directly into the theme source code?

  4. 10 years, 9 months ago Steve Walker

    I wanted the background to stay in the back. I had a transparent logo to place on a white masthead, but part of the background kept peeking through the masthead.
    I ended up adding white in the middle of the original background image to make it look like the bubbles are bordering the content page.
    There’s really not any code because I just replaced the background image but the site looks like this now:
    http://www.thecleaninggirlinc.com/

  5. 10 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for the additional info. Glad to hear you found a solution that works.

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