Full width header for Prose theme: is it possible?

[Jamese]

I love the Prose theme, but I would like to make my header full width of the page.  Is this hard to do?  Is there some code that will take care of this?  I am pretty new at all this.

Thanks for your help.

http://www.OrganicGardening365.com

[wendycholbi]

Yes, this is definitely possible, with some custom CSS. I have an example here:

http://style3.sitesetupkit.com/

Here's the basic CSS setup (this also makes the navbar background stretch the full width of the page, directly beneath the header). Paste this code into Genesis --> Custom Code --> Custom CSS:

/*for full-width header: set body width to 100%, center the #wrap, position header background in center of page, set width and centering on #nav, #inner and #footer*/

body {
 width: 100%;
}
#wrap {
 margin: 0 auto;
}
#header {
 background-position: top center !important;
}
#nav {
 width: 100%;
}
#nav ul {
 width: 970px;
 margin: 0 auto;
 float: none;
}
#inner {
 clear: both;
 margin: 15px auto 0;
 width: 920px;
}
#footer {
 width: 970px;
 margin: 0 auto;
}

You'll also need to set the header width in Genesis --> Design Settings --> Header to the width of a header image that will stretch across the entire page (at least 2000px, but a small percentage of monitors are 2560px wide) to tell the header uploader in Appearance --> Header not to crop your header image when you upload it.

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[Jamese]

This is totally brilliant.  Thanks so much.  Can't believe it was so easy.

[Jamese]

Well,  Now I have some questions.   When I paste this code in, it makes the header and footer full width and they are both responsive, but the the listings of my blog cease to be responsive.  Is there some way to fix this?

Another question:  with the code you shared, the footer becomes responsive, but there is a big gap between the 2nd and 3rd widget area.  Is there any way to have the three widget areas centered or not full width?  It just looks funny with that big gap of no text.

[wendycholbi]

Aha. I can definitely answer your second question, and I have a suggestion about your first question.

To make your footer widgets lose that gap, add this code to Genesis --> Custom Code --> Custom CSS:

#footer-widgets {
 width: 970px;
}

...unless you want the green background to stretch full-width but the widgets themselves to be centered, in which case try this (if you do this, you probably want to also remove the 1px white border in Genesis --> Design Settings --> Footer Widget Area):

#footer-widgets .wrap {
 width: 970px;
 margin: 0 auto;
}

Two more things I noticed:

1. The code I gave you included a width/centering for the #nav, but you're using #subnav, so if you change both instances of #nav in my code to #subnav, you'll get a full-width navigation bar background, with the actual navigation items above the main body of the site. Try it and see what you think.

2. This is optional, but I think it might look better (on wider screens especially) if the site title wasn't all the way to the left, and the search bar wasn't all the way to the right. Here's a snippet that preserves your full-width header image, but moves the site title and header widget above the main body of the site:

#header .wrap {
 width: 970px;
 margin: 0 auto;
max-width: 100%;
}

Okay, going back to your first question. I think I've figured out a way to fix this (and this was a good exercise for me, so thank you for pointing out that the content area becomes unresponsive with my full-width header code).

Look at the last line of the code snippet above, where it says

max-width: 100%;

You'll need to add that "max-width: 100%;" line to to the declarations for #header, #inner, and #footer (before the closing curly bracket for each of those items) in the code you pasted into Genesis --> Custom Code --> Custom CSS.

I think that should do it, according to the testing I did in Firebug. But let me know if it doesn't work, OK?

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[Jamese]

I can't get rid of the white line in the footer.  I got rid of the border in the footer widget area.  So I may have to live with it.

The inner part of the site is now responsive again.  Perfect.

Do I put the  code below in place of the header code in the large bit of code you already gave me or do I just add it to everything?  If I just add it, does it matter where?

#header .wrap {
 width: 970px;
 margin: 0 auto;
max-width: 100%;
}

[wendycholbi]

I added a line to the footer-widgets declaration that should hopefully get rid of the white border (I don't know why the Design Setting wouldn't work). Here's the whole enchilada, with all the bits integrated. You can replace the entire contents of your Genesis --> Custom Code --> Custom CSS with this:

/** Do not remove this line. Edit CSS below. */

/*for full-width header: set body width to 100%, center the #wrap, position header background in center of page, set width and centering on #subnav, #inner, #footer-widgets and #footer*/

body {
 width: 100%;
}
#wrap {
 margin: 0 auto;
}
#header {
 background-position: top center !important;
 max-width: 100%;
}
#header .wrap {
 width: 970px;
 margin: 0 auto;
 max-width: 100%;
}
#subnav {
 width: 100%;
}
#subnav ul {
 width: 970px;
 margin: 0 auto;
 float: none;
}
#inner {
 clear: both;
 margin: 15px auto 0;
 width: 920px;
 max-width: 100%;
}
#footer-widgets .wrap {
 width: 970px;
 margin: 0 auto;
 border: none;
 max-width: 100%;
}
#footer {
 width: 970px;
 margin: 0 auto;
 max-width: 100%
}

Hope this helps!

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[Jamese]

Thanks you SOOOOOO much.  What can I do for you? I wish I could send you some ripe tomatoes from my garden this summer.

[Jamese]

This reply has been marked as private.

[Jamese]

This reply has been marked as private.

[wendycholbi]

Your gratitude (and confirmation that my tweaks were effective in helping you with your website) on this public forum is the best possible thanks. Although ripe tomatoes do sound quite appealing 🙂

(I have a small garden every year, and it is time to plant my own tomatoes...just need to drag myself away from the screen to do it!)

Also, I don't know if your private reply was intended for me, but those can only be seen by forum moderators and admins, and I'm not one of those. In case you did want to say something to me privately, my contact page is here: http://www.wendycholbi.com/contact/

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[carolinagirl715]

Hi Wendy.  I came across your discussion with Jamese.  I'm having a similar issue but it's very strange.  When I look at my site in Chrome, the header looks fine; however, when I pull it up in IE (latest version), the right end is chopped off and the subnav bar doesn't run the full width of the page but divides into two rows.  I haven't tried inserting your code into the custom CSS yet and was wondering if you would take a look at my site first.  I created the header image myself and used these dimensions:  1349 x 300 and changed to these dimensions in Appearance>Header.  Do I need to insert the custom code above and redo my header for the 2000 pixel width as you mentioned above?  I am a complete novice and I really appreciate your insight.  Thank you.

http://www.dandelionnotes.com

 

[wendycholbi]

Hi Beth,

In your case, I don't think you need to redo your header to a 2000px width, because it's transparent over a white background, so even if the screen is wider than 1349 pixels, you won't see the edge of the header image the way you would have with Jamese's apple image.

I'd suggest trying the code in my post above, with one modification: Instead of setting the width of #subnav ul to 970px, give it a max-width of 100%, as many of the other selectors already have. That should let the navigation menu stretch the full width of the page while allowing it to wrap on smaller screens (on my laptop screen, for instance, which is 1280px wide, the last two navigation menu items will wrap rather than stretching off the screen and forcing me to scroll to see them).

Doing this will show the entire header to users with screens at least 1349px wide, but users with smaller screens will see the header clipped on both sides. If you want to show smaller versions of your header to users with smaller screens, you might check out Nick the Geek's Genesis Responsive Header plugin, which lets you upload multiple smaller header images (and tells you exactly how wide each of those smaller versions needs to be for optimal viewing on the most common device sizes).

If you also want the content area and/or sidebar to be wider, you'll also need to add some code to adjust those areas. This thread has several code snippets for a person who wanted to widen his site to 1100px; you can borrow the snippets for things like #content-sidebar-wrap and #content. If you do this you'll also need to adjust the width of #inner in my code above so it's wide enough to hold both the content area and the sidebar.

I hope this helps -- let me know how it works out!

 

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[carolinagirl715]

Thank you so much!  This worked!  I did remove some custom code that was already there:

add_theme_support( 'genesis-structural-wraps', array( 'header', 'nav', 'subnav', 'inner', 'footer-widgets', 'footer' ) );

Is that something I need?   Anyway, it looks great in Chrome & IE now.  My next step is to check out the plug-in you mention above!  I really, really appreciate your help!!  Thank you!!!!

[Jamese]

Hi Wendy,

Just realized my sub nav was not responsive and found your comments above and fixed it.  Thanks so much.

 

[Jamese]

Hi Wendy it's me again. I have just realized that the menu tabs are not responsive in the code you provided me a couple of months ago. Is there a way to fix that?

[Ajitelev]

Hi Wendy,
First of all thanks for the above info, in background only i make all tweak based on your code above.

But Wendy got some more issue,

#footer {
background-color: #0c776d;
width: 100%;
margin: 0 auto;
max-width: 100%;
}
#footer-widgets .wrap {
width: 970px;
margin: 0 auto;
}

i need my footer ( return to top and copyright section to get shrink a bit ) in the line of header, without affecting the footer background.

second as you can see on my site http://bloggingsaga.com the side got wider but the distance between sidebar and content increase, can you tell me how to increase the content width to fill that space,

Thanks.

[apouch]

Hi Wendy
Your tutorial has been very helpful but I need some help getting the navigation bar to be responsive.

My website: http://www.annepouch.com/grla/ has a full browser width image only on the home page, internal pages will be 970px wide, you can see that this page is working: http://www.annepouch.com/grla/who-we-are/
And the portfolio pages will have a 2 column layout which you can see here: http://www.annepouch.com/grla/building-envelope-1/

I am pulling my hair out trying to figure out why my navigation bar isn't responsive. I think I have the concepts of when to use width: 100% and when to be specific - if I remove the
#nav ul { width: 970px;} It becomes responsive but then it is no longer centered, but it is left justified. the "margins: 0 auto; and float:none" don't seem to make it work either.

Below is my Prose css in the Custom Code box:

/** Do not remove this line. Edit CSS below. */

/*for full-width header: set body width to 100%, center the #wrap, position header background in center of page, set width and centering on #nav, #inner and #footer*/

body {
width: 100%;
}
#wrap {
margin: 0 auto;
}

#nav {
width: 100%;
}

#nav ul {
width: 970px;
margin: 0 auto;
float: none;
}

#nav ul a {
padding-right:30px;
}

.post-2 h1 {
display:none;
}

#inner {
clear: both;
margin: 15px auto 0;
width: 100%;
}

#content-sidebar-wrap {
width: 100%;
}

.content-sidebar #content-sidebar-wrap, .sidebar-content #content-sidebar-wrap {
float: none;
margin: 0 auto;
width: 970px;
}

#content {
float: none;
margin: 0 auto;
width: 970px;
}

.page-id-2 #content {
width:100%;
}

#footer {
width: 970px;
margin: 0 auto;
}

Thanks
Anne

[wendycholbi]

Hi everybody,

@Jamese: I believe your navigation will become responsive if you add

max-width: 100%;

to your

#subnav .wrap

and

#subnav ul

.

@apouch: Very similar suggestion for you: You're using #nav instead of #subnav, so add that max-width declaration to

#nav .wrap

and

#nav ul

. You may also need to add it to

.content-sidebar #content-sidebar-wrap, .sidebar-content #content-sidebar-wrap

and

#content

and

#footer

-- basically everywhere you have a fixed width like 970px.

@Ajitelev, your site doesn't look like it got wider (or maybe you've reverted it since you posted). You can try adding a max-width declaration to your footer and footer-widgets, but it looks to me like your content-side-bar wrap is wider than the wrap, so your sidebar is getting cut off.

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[Jamese]

Wendy,

This is the code that is currently in place for those sections:

}
#subnav {
width: 100%;
}
#subnav ul {
width: 970px;
margin: 0 auto;
float: none;

It doesn't say subnav .wrap --just subnav. Should I add "wrap"? I did add "max-" in front of "width" both places and the menu bar is now responsive. But it is now all the way to the left side of the page when the screen is full. The tabs do not line up with the header text. http://www.organicgardening365.com

[Author]

Posts