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
    Posts
  • #111067 Resolve

    TB

    Hi!

    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
    #150071

    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.

    #150087

    TB

    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.

    #150158

    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:

    body.custom-background,
    #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!

    #150166

    TB

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

    #150189

    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;
    }

    #150223

    TB

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

    #150227

    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.