This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Menu (Navbar) below Masthead Background Image

Resolved 9 replies generalpremium
Guilherme Quental
10 years ago · Last reply by Andrew Misplon 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Andrew Misplon Staff 10 years, 9 months ago

    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. Guilherme Quental 10 years, 9 months ago

    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. Andrew Misplon Staff 10 years, 9 months ago

    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. Guilherme Quental 10 years, 9 months ago

    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. Andrew Misplon Staff 10 years, 9 months ago

    Try the following to independently move the logo:

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

    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. Guilherme Quental 10 years, 9 months ago

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

  8. Magus Staff 10 years, 9 months ago

    Hi Guilherme

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

    Magus

  9. Andrew Misplon Staff 10 years, 9 months ago

    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.

Have a different question or issue?

Start New Thread