Support » Fixing WordPress » How-to extend header, footer & menu bar to fit the entire window?

  • PeachfullyChic

    (@peachfullychic)


    I want to extend the header (include the thin gray line below social media buttons/above my header image, and the header image), footer stripes (green bar & gray copyright bar), & menu bar (green) to fit the entire width of the window but keep the content within the middle of the screen on my site: http://www.peachfullychic.com/

    You can see an example of what I’m looking to do similar to these two sites headers:
    http://www.bluchic.com/
    http://lovehudson.com/

    I’m using a Isabelle Theme from BluChic.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hareesh Pillai

    (@hareesh-pillai)

    Use the following CSS.

    .container {
    width: 100%;
    }
    img.header-title {
    width: 100%;
    }

    PeachfullyChic

    (@peachfullychic)

    Sorry – where should I add this?

    Hareesh Pillai

    (@hareesh-pillai)

    In your theme folder you’ll find a file called style.css
    Access it either through FTP or stylesheet editor.
    This code should be inserted at the bottom of that file. i.e below all the code that is previously present in that file.

    PeachfullyChic

    (@peachfullychic)

    OK, I added the code but it expanded the body of the website content to fit the window (messed up that formatting) and did nothing to the menu bar, header or footer.

    Jeffrey Zinn

    (@jeffreyzinn)

    PeachfullyChic, you will need to break up the parts of your template so they are not all contained into one block element. Currently, all of the content is wrapped inside of <section class="container">. As such, the width of all template elements are governed by that one container.

    However, if you were to break the header elements into their own section, you could make the header sections width 100% as suggested by Hareesh above while keeping the .container section’s width fixed. Those two elements would remain independent style-wise. Something like:

    <section class="header">
         {banner}
         {navigation}
    </section>
    
    <section class="container">
         {everything else}
    </section>

    Similarly, you could break out the footer elements this way if you wanted that section to be full width as well.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How-to extend header, footer & menu bar to fit the entire window?’ is closed to new replies.