Twentyeleven - child - Full width header & footer (7 posts)

  1. Maracas1970
    Posted 4 years ago #

    Hello everybody.
    I'm trying to make a full width header and footer for my theme, which is a child of the twentyeleven theme.

    I have tried putting the <header id="branding" role="banner"> above the <div id="page" class="hfeed"> and setting widths in my css, even tried making a container div for the branding to go in to get it to sit centrally. All that seems to end up happening is i get a horizontal scroll bar and the header is offset from the rest of the page.

    Anyone offer up any suggestions as to how to style the header to full width. I assume it has to go outside of the page div, otherwise it`ll be continually restricted by the page container width.

    I just want the header to be a gray colour all the way across at all resolutions, im sure you know what i mean ;)

    Thanks for looking ;)

  2. Michael
    Forum Moderator
    Posted 4 years ago #

    please post a link to your site to illustrate the problem.

    it might also help if you can paste the full code of header.php of your child theme into a http://pastebin.com/ and post the link to it here - how-to: http://codex.wordpress.org/Forum_Welcome#Posting_Code

    same for footer.php ...

    in the meantime, try a tool such as Firefox' add-on Firebug http://getfirebug.com/ to investigate the html and css of your site to find what might be wrong.

  3. Maracas1970
    Posted 4 years ago #

    Sorry, i should have posted that stuff. Just thought it may have been something that was a known quantity, and easy to do.

    Anyway, i have got it working mostly, albeit the right hand side of the container for the header i made does not extend full width when the page is minimized. Basically, if you pull the bottom right of the browser around making the page smaller, some white-space appears to the right of the blue header strip, this doesn't happen when just viewing on different screen sizes, mobile is OK too. Just when you resize the page.

    URL: http://www.gotodesigns.co.uk

    here is my header: http://pastebin.com/1qSt3p59

    My stylesheet: http://pastebin.com/cBEFT1XK

    As you will see, i have moved the header out of the page, and body to achieve what i have so far.

    I have firebugged it, I think it`s something in the CSS somewhere, just cant work out what.

    Thankyou for your time.



  4. Michael
    Forum Moderator
    Posted 4 years ago #

    to center the header in changing browser widths, try to format #branding the same way as #page is formatted in the parent theme.

  5. Maracas1970
    Posted 4 years ago #

    Hi alcymyth.

    Thankyou, the problem is the container i made to wrap the header/branding in. It`s called #headerwrap, and envelops the branding area. The problem only occurs when minimizing the browser window.

    It seems to look OK at varying screen resolutions, but just bugs out at the top right hand corner when minimized. When pulling the browser window around, and pulling the horizontal scroll bar to the right. Hope that makes sense ;)

    Also, should i be playing around with parent stylesheets?

    Thanks again


  6. pyael
    Posted 4 years ago #

    Marcus, can you please tell us how did you make the full width header and footer? It looks good on your website now. I would like to do the same.

  7. Maracas1970
    Posted 4 years ago #

    Hello Pyael

    What i ended up doing was wrapping the header in a div with a
    width and height of 100% and set a background image to repeat-x;

    So the div basically encompasses the header with the navigation contained within it. This is all in header.php

    You can see it better if you look at it in firebug.

    Hope that helps.

Topic Closed

This topic has been closed to new replies.

About this Topic