How do I set my header to be full width while using a full width layout?
What width will the graphic need to be and will it be the same width for full width slider images using Meta Slider?
Thanks,
Cliff
Full Width Header in Full Width Layout
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Cliffd
So sorry we weren’t able to reply sooner.
The masthead background image and Meta Slider image don’t have a known width when using the Full Width layout, their width will depend on the screen width. The images remain 100% width whether viewed on a 27″ display or a 15″ display.
The best way to setup your masthead background and Meta Slider is to layer. Ensure that the background image doesn’t have anything specific like Text that will look funny if stretched. Background textures or lanscape images work the best. For the masthead, layer by using the masthead background image in conjunction with the Theme > Settings > Logo image. The logo won’t stretch. For Meta Slider, we cover layering here: https://siteorigin.com/vantage-documentation/getting-started/slider/.
If you’d like to remove the content constraint from your header and make it 100% in width. Try the following at Appearance > Custom CSS:
/* 100% Width Header */ #masthead .hgroup.full-container { max-width: 100% !important; }(Make sure that Appearance > Theme Settings > Layout > Layout Bound is set to Full Width).
What is the largest log size in width we can use?
Without code level customization the largest logo size the theme will create is 1010px wide.
Header issue is solved! Great help.
The slider I’m using as a shortcode so I can place 3 quick navigation icons above. How do I make the slider full width while using the shortcode?
Thanks,
Cliff
Cool :)
You can try this:
1. Add a Text widget to your first row. Add the shortcode.
2. Edit the row, click Layout on the right, set Row Layout to Full Width Stretched.
3. Assuming this is just for your home page and you want to adjust the padding between the menu and the slider, add the following to Appearance > Custom CSS:
/* Home */ .home #main { padding-top: 0px; }Adjust the padding value as required. Don’t need to use it if not required.
No success adding as a shortcode.
I can get the slider full width when using the default Home Page as in Appearance, Theme Settings, Home, Home Page Slider.
Is there a way to add a row and widget above the default slider location?
Cliff
Unfortunately not. The page Meta Slider is placed before the regular content area. Page Builder content is inserted into the regular content area.
In order for the shortcode option to work, the slider of your choosing will need to be set to 100%. If it’s Meta Slider you need to go to Meta Slider > Advanced and enable 100% width.
That works. Thanks!
For sure. Glad we could help.