StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Is it possible to change the header to fit all the way across the screen

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Is it possible to change the header to fit all the way across the screen

This topic is: not resolved

Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 8, 2014 at 1:17 pm #130934
    Sam Angel
    Participant

    Hello,

    I'm trying to find out if there is a way to have the header section fit the full width of whatever screen you're viewing from in the News Pro theme. I would like it to look like this: http://www.thetitlereport.com/TTR/process-automation-report.aspx. With just the menu bar and header section stretching the full width but then having the content area remain the same.

    Thank you.

    http://www.bloggingmywayforward.com
    November 11, 2014 at 8:13 am #131187
    Robin
    Member

    Yes, if you are willing to dig into your style.css file. You will want to look for pretty much everywhere that says .site-container and remove it, and apply that styling to .site-inner and .wrap (specifically the max-width: 1140px; margin: 0 auto; bits). Then if you change your .title-area width to 100% I think you'll be pretty close, although will still need some tweaking.

    Play around with it in Firebug or Chrome's Developer Tools, whichever is your preferred browser, before you dig into your stylesheet. (And, of course, make sure you have a backup!) HTH

    I do the best I can with what I’ve got. (say hey on twitter)

    November 12, 2014 at 9:31 pm #131363
    Sam Angel
    Participant

    This is awesome! I'm really starting to like it.

    Another question - I want my header graphic to go all the way across too. How do I make that happen? Are there certain dimensions I need to use to make the graphic or will it all happen in the code?

    November 18, 2014 at 10:38 am #132003
    Robin
    Member

    That can get a little trickier due to your graphic having text...you would need to set it as the background of the header instead of the site-title a, to get outside of the wrap constraint, and then upload a larger image, and experiment with setting the background size to be cover, maybe, and see how that goes.

    An alternative approach to consider would be to split your current graphic into two images: one with just the text and photo, and use that as you are now, and then set the bricks as a repeating background on .site-header. That way, your text shouldn't get cut off, but your bricks, which is really the part that you want full width, I assume, will cover everything. HTH

    I do the best I can with what I’ve got. (say hey on twitter)

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.