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, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Steve

    Try adding:

    #page-wrapper { margin-top: 0; }
  2. 10 years, 10 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, 10 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, 10 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, 10 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