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

  • Author
  • #1144118

    For a 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 support pages.)

    The structure seems to be body > page > 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


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

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

The topic ‘Twenty Twelve full width header (stretch bg full window width)’ is closed to new replies.