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].
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.
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
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
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.
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
Try the following to independently move the logo:
#masthead .hgroup .logo img[style] { padding-top: 20px !important; padding-bottom: 20px !important; }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?
I fixed the logo problem using the class “.logo-no-height-constrain”.
Thank you
Hi Guilherme
That’s good to hear. If you need any more help please feel free to open a new support thread.
Magus
Sweet! Glad to hear you made progress on this.
All the best :)