Making the header/footer span the full width of the screen

Follow

Many of the themes have a fixed width, so that the elements on the page don't span the entire width of the screen. Many people like to have the content at a fixed width, but the header and footer to span the full width of the page.

It is a fairly easy tweak to make. However you will need to have some knowledge of how the Templates work in the platform. This also requires an understanding of HTML.

NOTE: You will have to apply these tweaks to each template used on the site.

If you go to edit the templates, you will see this HTML:

<div class="Layout container">
<header class="LayoutTop row">
<div class="col-sm-12">
$$HEADER$$
</div>

The <div class="Layout container"> is what handles the fixed width of the site. We want the header (and its surrounding div class) to be outside the fixed width. To do this, we just need to place the HTML  above the <div class="Layout container"> line.

NOTE: You will want to replace the class "row" with the class "clear". The "row" class will put 15px of margin on either side,  leaving a horizontal scroll bar on the page. The "clear" class adds 15px of padding, and won't cause the horizontal scroll bar to appear.

<header class="LayoutTop">
<div class="col-sm-12">
$$HEADER$$
</div><div class="Layout container">

And that is all you need to do to put the header outside of the fixed width. The same principle applies towards the footer. Move the footer text below the closing div for the <div class="Layout container">. This will make the footer full width.

<div class="Layout Container">
<!--HTML here for the rest of the layout -->
</div> <!-- The closing tag for the "Layout Container" class -->
<footer class="LayoutBottom">
<div class="col-sm-12">
$$FOOTER$$
</div>
</footer>

 

 

Have more questions? Submit a request

Comments

  • Avatar
    Alan

    I can't seem to make this work for the Workshop Theme. I moved both Header and Footer layouts outside of the "Layout Containter" Class, but I still seem to have the "whitespace" on the sides of my page. Any other suggestions? How can I get into the Layout CSS to attempt the change there?