Increasing header width on suit's theme?

  • Unknown's avatar
    jannamcphee · Member ·

    I would like my header and my menu bar to extend to full screen width & I’m having a problem figuring out how to do that… I don’t mind if my blog width is the set 960, but I’d like header and menu bar to be full screen width. Is that possible?
    Here’s an example of what I would like: http://rivetermagazine.wordpress.com/
    Thank you.

    The blog I need help with is: (visible only to logged in users)

  • staff-totoro · Staff ·

    Hi there,

    The big difference between the example you provided, and your site, is that yours has an image, and there is no way to stretch that full width. What you can do is two things that will get you pretty close.

    First, you will need to upload a header image that fades out to a solid color at the edges. You would need a graphics program of some kind to do that, but if you can manage it, you could use that color as the background color for your header area that will stretch full width, using the following CSS: 

    .site-header {
background-color: #EBDDB4;
}

    To use the above code, click on your site name on the admin menu at the top left, and in the drop-down, select “Customize” to launch the site customizer. You can also reach the Customizer from your dashboard by going to Appearance>Customize

    From there, click on the “CSS” tab, and paste in the code, and be sure to save your changes when you are done.

    In the code above, I chose a color (#EBDDB4) that is close to the color of the grass in your image. If you were able to fade that color in to your image, it would appear seamless, instead of having a hard edge, as you see here: https://cloudup.com/cDu6w3VEF3D

    Hope that helps. Please let me know if you have any further questions.

  • The topic ‘Increasing header width on suit's theme?’ is closed to new replies.