Need help? Check out our Support site, then


Twenty Twelve full width header (stretch bg full window width)

  1. For a wordpress.com-hosted blog, I'm thinking of switching to the Twenty Twelve theme with custom CSS. Before I do, I need to determine whether it can support a full width header and footer. In case I'm using the wrong terminology, I mean that I want to put a background color for the header and menu bar that stretches the full width of the window. (Just like the blue bar that runs across the top of wordpress.com support pages.)

    The structure seems to be body > page > #masthead.site-header. Body and page are full width, but #masthead seems to be limited to 960px, although I can't find the CSS that's doing that. My hope was that I could set masthead to 100% and be done. Or at least set the whole page to 100%, main to 960px, and center everything with margin: 0 auto.

    Is something like this doable with Twenty Twelve?

    The blog I need help with is adventuresincubing.com.

  2. Answering my own question, here's what it took to get a full width header/nav bar in the Twenty Twelve theme.

    #main {width: 960px; margin:0 auto;}<br /> #masthead {background: <em>FULL-WIDTH-BG-COLOR</em>;}<br /> hgroup {width: 960px; margin: 0 auto;}<br /> .main-navigation {background: <em>FULL-WIDTH-NAV-BAR-COLOR</em>;}<br /> .nav-menu {width: 960px; margin:0 auto;}<br /> .site {width: 100%; max-width: 100%}

    This would go in the custom css to override the default CSS.

Topic Closed

This topic has been closed to new replies.

About this Topic