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.

Full Width Header in Full Width Layout

Resolved 10 replies premiumthemetheme-vantage
Cliffd
10 years ago · Last reply by Andrew Misplon 10 years ago

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

URL: http://getonthestick.dallasmediaproduction.com/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

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

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

    (Make sure that Appearance > Theme Settings > Layout > Layout Bound is set to Full Width).

  3. Cliffd 10 years, 7 months ago

    What is the largest log size in width we can use?

  4. Andrew Misplon Staff 10 years, 7 months ago

    Without code level customization the largest logo size the theme will create is 1010px wide.

  5. Cliffd 10 years, 7 months ago

    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

  6. Andrew Misplon Staff 10 years, 7 months ago

    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.

  7. Cliffd 10 years, 7 months ago

    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

  8. Andrew Misplon Staff 10 years, 7 months ago

    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.

  9. Cliffd 10 years, 7 months ago

    That works. Thanks!

  10. Andrew Misplon Staff 10 years, 7 months ago

    For sure. Glad we could help.

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