Hello,
I would like the large image on the home page to fit into the masthead area as well ( a good example would be the siteorigin home page – the image goes to the top of page). However, when I upload the image to the masthead a few things happen: 1. the image dramatically increases causing some of the type to be left off the page. 2. the menu sits below the image – I would like it to remain at its current position at the very top left. 3. the logo is then centered.
So, basically if you take a look at the home page, I just want the image to reach the very top of the page without any gaps between the image and the menu – the logo and image should overlay the image.
http://hypecreative.net/
Thank you!
Hi wjwilson42
Thanks for running Vantage.
Our Influence theme has this as an option, Vantage unfortunately doesn’t at this stage.
Try this, add your hero image via Meta Slider instead of a Page Builder row background. Then add the following to Appearance > Custom CSS:
.main-navigation { background: rgba(255, 255, 255, 0.8) !important; } #main-slider { margin-top: -79px; }Too bad! Any plans to add that option sometime in the near future?
The above option does cause the image to go to the top of the page but the menu and logo are pushed up (and off the page). Any suggestions?
Thanks again,
Unfortunately not as far as I know, at least for the moment.
I just tested this out now. If you are using the Logo In Menu layout, use a Meta Slider on the home page and have the CSS in place it should work.
Yep, got it to work! Thank you…..
Now, is there a way to make the image appear like the one below it? I’ve played with the height and width but it continues to “zoom” in picture regardless of the changes I make – causing the type to look blurry and reducing the overall image.
Thank you!!
For sure.
Try the following under Appearance > Custom CSS:
/* Vantage Theme, remove max width/layer centering. Usage: Copy and paste this code into Appearance > Custom CSS or your own Custom CSS module. */ body.responsive.layout-full #page-wrapper .metaslider .full-container, .layout-full #page-wrapper .metaslider .full-container { max-width: none; }Great! it worked! Thanks again!!
For sure, glad we could help.
Hello,
I would like the same affect as above to occur on each of my pages, not just the home page. How would I go about doing that?
Thank you!!
It should work out the box now. Just set a slider per page using the Meta Slider drop down menu found in the right column when editing any page.
The slider in the page “SERVICES” is doing exactly the same thing I was originally having problems with on the home page – not reaching the top of the page. I inserted the original slider that does reach the top of the page but it still does not reach the top.
The services page slider is being inserted into Page Builder. You’d need to remove it from Page Builder and use the slider selection drop down on that page to choose the slider. It’s fine if there is still a problem, but I need to see it setup with the slider selected from the page drop down, not inserted into Page Builder.
Ok, I removed the slider from Page Builder and used the slider selection drop down in the Editor. The slider does not appear on page at all (which is why I inserted via the Page Builder)….
That’s a separate issue we’d need to try troubleshoot. Is the slider drop down saving correctly? If so, let’s try rule out plugin issues, temporarily de-activate all non-SiteOrigin plugins and see if there is any change.
Deactivated all non-SiteOrigins plugins. Same result
If you setup a new page and insert some demo text in the regular Visual tab and select a slider, does it render?
Perhaps also test with sliders other than the one you’ve currently got selected.
Yes, I added “NEW PAGE” and the slider does appear – but not in full width, or reaches top of page.
Unfortunately not something I’ve seen before. If you would like me to take a look, please email [email protected] with a set of temporary login details a link back to this thread. Please send everything in an email from yourself. Thanks.
Hello,
I tried the above method with Meta Slider but it did not work, that was after I tried the newly introduce Hero Image widget. Any suggestions please?
Hi Mokorr
Thanks for reaching out. Please see:
Thread: Hero Image Settings
We do our best work with a fresh thread per question. Thanks :)