Is the above possible while keeping all main content in the boxed container format checked off in Vantage Theme Settings?
I tried moving the header div above the container, and while that appeared to work, the site title and header menu widget moved out to the page perimeter and were no longer responsive.
I’m using Vantage Free. An example of what I am after is www.uaudio.com.
Thx
Update – In my web-developer I can move the following line:
…
from directly BELOW the following line to directly ABOVE it:
and that gives me a full-width header that seems to be responsive.
Problems I need your help with:
1. Where do I find this HTML code in the Vantage theme Appearance>Editor?
2. There is a byproduct of doing this – a space (part of the background I assume) now appears below the header above the slider. Oddly enough, when I move the footer outside the page wrapper, there is no such space.
Here’s how I moved the footer outside and made it full-width, but as with the header, I don’t know where the HTML code is to edit in the same way I did in the web inspector.
I moved the following line:
…
from directly ABOVE to directly BELOW the following line:
Another update.
Header.php – I was able to get a full width header that was responsive while retaining the boxed container for the main content by moving the line down below the line
Problem I still need your help with: Below the full width header is a space that separates the slider from the header that I believe is part of the background – unfortunately, it disappears when I reduce the page on my laptop. I would like to retain that space- again, see http://www.uaudio.com for what I am after.
Footer.php – I was able to get a full width footer that was responsive while retaining the boxed container for the main content by moving to the very top of this file.
Problem I still need you help with: Unlike what happened with the header, there is NO space between the footer an the bottom of the home page. I would like one so the top and bottom of the main container are identical, as well as preserving that space (padding?) when I reduce the page on my laptop and for mobile.
Thanks!
My code snippets disappeared from the most recent update, making it incomprehensible.
Here is a clearer repost (I hope).
1. Using a child theme, I revised header.php as follows, which gave me a full width header that was responsive. The basic gist was to move the header div above, and therefore outside, the page-wrapper div that creates the boxed container.
<?php /** * The Header for our theme. * * Displays all of the <head> section and everything up till <div id="main"> * * @package vantage * @since vantage 1.0 * @license GPL 2.0 */ ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta http-equiv="X-UA-Compatible" content="IE=10" /> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php do_action('vantage_before_page_wrapper') ?> <?php do_action( 'vantage_before_masthead' ); ?> <?php get_template_part( 'parts/masthead', apply_filters( 'vantage_masthead_type', siteorigin_setting( 'layout_masthead' ) ) ); ?> <?php do_action( 'vantage_after_masthead' ); ?> <?php vantage_render_slider() ?> <?php do_action( 'vantage_before_main_container' ); ?> <div id="page-wrapper"> <div id="main" class="site-main"> <div class="full-container"> <?php do_action( 'vantage_main_top' ); ?>2. Again using the child theme, I revised footer.php as follows, which gave me a full width footer that also was responsive. The basic gist was to move the footer div below, and therefore outside, the page-wrapper div that creates the boxed container.
</div><!-- #page-wrapper --> <?php do_action( 'vantage_main_bottom' ); ?> </div><!-- .full-container --> </div><!-- #main .site-main --> <?php do_action( 'vantage_after_main_container' ); ?> <?php do_action( 'vantage_before_footer' ); ?> <?php get_template_part( 'parts/footer', apply_filters( 'vantage_footer_type', '' ) ); ?> <?php do_action( 'vantage_after_footer' ); ?> <?php do_action('vantage_after_page_wrapper') ?> <?php wp_footer(); ?> </body> </html>3. Space Problems Solved – Somehow the space between the new full width header and the meta slider disappeared, so I no longer need help on that one. It might have been my tinkering with the image and the meta-slider as I rechecked the settings, but I am not exactly sure. Because that space disappeared, I am no longer concerned about the lack of a similar space at the bottom of the container before the full width footer.
4. NEW PROBLEMS – THE SITE TITLE AND THE HEADER WIDGET MENU HAVE EACH MOVED OUT TOWARD THE EDGES OF THE FULL WIDTH HEADER. I WOULD LIKE THEM TO STAY PUT OVER THE BOXED CONTAINER AS THEY DID BEFORE (AND OF COURSE STAY RESPONSIVE, WHICH THEY CURRENTLY ARE).
5. MY SAME EXAMPLE – http://www.uaudio.com.
More than 4 days and still awaiting reply. To simplify: what is the custom CSS to cause a row of 3 Vantage Headline widgets to stay in a fixed table/column grid when resizing? The SiteOrigin home page rows with 3 columns (including the ones with the circle icon widgets) compress but stay side-by-side. How?
Oops. They should have been an update to my support thread regarding columns.
As to this, also 4 days and no reply. To simplify: what is the custom CSS for a Vantage Child Theme that will keep the site title and header widget menu to act as if still in the boxed container, even though the header was moved outside the page wrapper div so as to make it full width? I have seen the code proposed by Andrew for creating a full width header, but it does not work, because both the site title and header widget menu lose their format/style. At least with my method the format/style remains and they act responsively when resizing, with the problem that they get pushed out far to the edge of the full width header, which looks awkward on a 21″ or larger monitor.
Thx.
Hi cames
Thanks for the wait, support and detailed thread, we’ve been catching up the last week so, unfortunately unusually high support loads.
If you’re running a premium theme, please be sure to insert your order number in the field provided when posting. We’ve been up to date with premium threads. If you’d like to find out more about how the forum is prioritised, please see: https://siteorigin.com/about/forum-thread-prioritization/.
In the case of running a free theme, please keep in mind that it can take us longer to get to you. We do our best. With both Vantage Free and Premium we don’t officially offer customisations. We try help out as much as possible but taking an existing child theme that you’ve built and then extending that or troubleshooting it is unfortunately beyond the scope we can offer.
If you set your layout to Boxed, the following will expand the header to full width and the footer. Just whipped this up for you now. Hope that helps. Please try it on the parent theme using a Custom CSS plugin.
/* Vantage Boxed Layout With 100% Width Header and Footer */ body.responsive.layout-boxed #page-wrapper header#masthead .full-container { margin: 0 auto; max-width: 1080px !important; } body.responsive #page-wrapper { max-width: 100%; padding-top: 0; } #main-slider { margin: 0 auto; max-width: 1080px; } #main { margin: 0 auto; max-width: 1080px; } #colophon { margin: 0 auto; max-width: 100%; } #colophon #footer-widgets { margin: 0 auto; max-width: 1080px; }Thanks, Andrew. I will try that. Are you suggesting that I don’t plug it into my child theme and instead download a separate custom css plugin? If so, which one do you use?
Pagebuilder question: Do you have or recommend a page builder sidebar or other widget that is scrollable window? My intended use is to place it beside an embedded soundcloud song widget and insert lyrics into the scrollable window.
Thanks!