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 😉
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.
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.
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.
to center the header in changing browser widths, try to format
#brandingthe same way as
#pageis formatted in the parent theme.
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?
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.
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.
- The topic ‘Twentyeleven – child – Full width header & footer’ is closed to new replies.