Home>Support>Menu (Navbar) below Masthead Background Image

Menu (Navbar) below Masthead Background Image

By Guilherme Quental, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hello,
I am a Vantage Premium user, my site is www.besttimetosurf.com.
How can I make the Menu appear under the Masthead Background Image, and the Metaslider right under the Menu?
Header padding won’t resolve, because it changes the size of the backgroud image.
If you check my website now, you will notice I’ve tried to resolve this by desactivating the Metaslider on “Theme Settings” and adding the slider in page builder, under a row with a spacer. But the Menu isn’t working properly this way. And you can see that the other pages are messed up as well.
Thank you very much.

URL: http://www.besttimetosurf.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. 9 years, 4 months ago Andrew Misplon
    Hi, I Work Here

    Hi Guilherme

    Could you perhaps revert the layout to default? Add the slider the normal way etc. We’ll then try assist once we can see how things are before the fix.

    Thanks

  2. 9 years, 4 months ago Guilherme Quental

    Done. You can see that the Menu overlapps the masthead backgroud. I would like to move everything a little bit down, so that the menu bar starts right under the masthead. I have also removed the following from Custom CSS:

    .home #main {
padding: 0 !important;
}
header#masthead {
  height: 125px !important;
  padding: 0 !important;  
}

header#masthead .hgroup {
  padding-top: 14px !important;
  padding-bottom: 60px !important;
}

#masthead .hgroup .support-text {
  line-height: 1.2em;
  position: absolute;
  right: 2px;
  top: 50%;
  margin-top: 2.2em;
  color: #ffffff;
  font-style: italic;
  max-width: 50%;
}

    Thanks

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

    Please try just the below as a starting point:

    #masthead {
  padding: 50px 0 0;
  background-position: top;
  background-size: 100%;
}

    Adjust the 50px padding value to expose more or less of the masthead background.

    Let me know how that goes.

  4. 9 years, 4 months ago Guilherme Quental

    That’s a start, but the logo image moved down… how can I move it up to center it vertically in the white space of the background image?
    Also, if I use a #masthead padding higher than 40px, it starts to deform the background image.
    Ty

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

    Try the following to independently move the logo:

    #masthead .hgroup .logo img[style] {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
  6. 9 years, 4 months ago Guilherme Quental

    Hi Andrew, that didn’t work… the logo didn’t move at all. Doesn’t matter the value I put on padding top and bottom for the logo img, the logo doesnt move vertically. Any other ideas?

  7. 9 years, 4 months ago Guilherme Quental

    I fixed the logo problem using the class “.logo-no-height-constrain”.
    Thank you

  8. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Guilherme

    That’s good to hear. If you need any more help please feel free to open a new support thread.

    Magus

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

    Sweet! Glad to hear you made progress on this.

    All the best :)

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