Full-width masthead or site header

Home Forums Automattic Forefront Full-width masthead or site header

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #111067 Resolve



    I think I might be getting the hang of using browser inspectors to target certain code on my blog. However I am having trouble adjusting the width of the masthead. I would love to make it extend the full width of the screen and change the color to #EEEEEE. I think I have gotten close by targeting #masthead in the CSS editor. However, I can only change the color and not the width. Can you help?

    The blog I need help with is wayofthebicycle.com. Thanks!

    The blog I need help with is wayofthebicycle.com

    Kathryn P.
    Happiness Engineer

    Are you sure you want to extend #masthead to the whole width of the screen? The way I picture it, that will look very odd on large monitors, with the logo all the way to the left and the menu all the way to the right, and a large blank area in between. Could you maybe explain a little bit more your design goals so I can better understand what you’re after? Thanks.



    Thanks for getting back t me so quickly. I wanted to keep the logo and menu where they are, within the 1045px width of the rest of the site. I merely wanted the background color and a bottom borderline to extend all the way across the page. Similar to the masthead on this support page. The WordPress.com logo and menu are stayinmg above the content and the masthead color extends all the way across the screen.


    Because of the way the HTML for the header is nested inside the .site element (the #page container), there’s not really an easy way to extend it to full width without affecting the rest of the layout. You can fake it though! There are a few different ways to go about doing that. Here’s one I came up with that might work for you:

    #masthead {
    background: #fff url("http://wayofthebicycle.files.wordpress.com/2014/04/wobheader_041114b.jpg?h=96") repeat-x;

    I used a random image from your blog in the example, but if you replace the url() value with a solid #eee colored image that’s 96px tall, it would act like a faux background. Note that this example takes over the custom background header function in Customize > Header using custom CSS (just something to be aware of).

    To give it a bottom border, make the bottom one or two pixels in your 96px tall image the border color you want.

    If you decide you’d like to have a different background image for the main body in the future, we could look at other potential solutions. But give the example above a try first!



    That worked the way I wanted it to. Thanks so much!


    It turned out well! I love the http://wayofthebicycle.com/ site. Great stories and great photos!!!

    Aside: I noticed after the header background color change that current page links in the top menu are black text on a black background. Adding this will fix it up:

    .navigation-main a:hover,
    .navigation-main a:focus,
    .navigation-main li.current_page_item > a,
    .navigation-main li.current-menu-item > a {
    color: #fff;



    Hey that works great! Thanks so much for that! You guys rule!


    Kathryn P.
    Happiness Engineer

    Fantastic! Glad you’re set with this.

    I’ll mark this thread as resolved and close it, but feel free to start a new one if you need help with anything else.

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Full-width masthead or site header’ is closed to new replies.