HTML5/Genesis 2.0 sticky header

@Eric & @David ~ thanks guys. I think you’re right Eric, there might have been a caching problem. I’m sure we’re just a gnat’s away, but what do I know, right… 8^)

This is all I now have in my Site Header section…

/*
Site Header
---------------------------------------------------------------------------------------------------- */

.head-wrap {
	background: #303236;
	margin: 0 0 40px;
}

.site-header {
	margin: 0 auto;
	max-width: 100%;
}

.site-header .wrap {
	padding: 16px 0;
	padding: 1rem 0;
}

/*
My Site Header
---------------------------------------------------------------------------------------------------- */
/* This is where the magic happens. You need
 * to assign a fixed position in order for
 * everything else to work correctly.
--------------------------------------------- */
.site-header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2000;
}

/* This will ensure your site looks correct
 * when the admin bar is displaying.
--------------------------------------------- */
body.admin-bar .site-header {
	top: 32px /* Make this 32px if MP6 is installed */
}

/*
Body Element
---------------------------------------------------------------------------------------------------- */
/* This Should Be Equal to the Height of your
 * fixed header bar.
--------------------------------------------- */
body {
    padding-top: 60px;
    padding-top: 4.28571429rem; /* Only Add this in Genesis 2.0 */
}

.head-wrap .site-header {
    background-color: #293f5e !important;
 }

Originally max-width was set to 1140px in this section…

.site-header {
	margin: 0 auto;
	max-width: 100%;
}

but if I change the max-width back to 1140px instead of 100% the header doesn’t expand right the way across at full size. But as you can see here ~ http://www.studiopress.com/responsive/?http://qloudpress.com ~ even when I use 100%, it doesn’t work that way for all viewports, 768 and 1024 for example.

What am I doing wrong?

Is my CSS so goddamn awful you don’t want to talk to me any more?

I’m guessing you’re on your holidays, so I won’t take offence.

No need to explain at all ~ but what do you mean I am not the center of your Universe?

Now I am heart-broken as well as a non-comic.

My missus always says most people don’t get my sense of humor. {That’s because she doesn’t have one ~ but don’t tell here I said that}

For instance, I asked her the other day, “…what’s the difference between man’s best friend, and his wife?”

Answer ~ if you locked your dog in the trunk of the car, he would still love you when you let him out! 8^)

Anyway, no, I didn’t fix it, its still the same. I guess you didn’t get time to check it as I suggested, but as you can see here ~ http://www.studiopress.com/responsive/?http://qloudpress.com ~ even when you use 100%, it doesn’t work that way for all viewports, 768 and 1024 for example.

Keep up the great work. And remember, I have ADS and a weird sense of humor… 8^)

Maybe Wes will take a moment and have a look.. do you think?

@Jason ~ no, but close. Actually its from Brad Dalton. I saw it here [ http://wpsites.net/web-design/how-to-make-your-nav-menu-sticky/ ] and thought it looked like a really simple solution. Which it was, since he left out the whole media queries bit, which is unusual for Brad as his stuff is usually pretty spot-on.

Fortunately, he’s take pity on me and he’s taking a look, so I should have an answer pretty soon now.

@touchofsummer ~ you were absolutely right and its fixed now.

All it required was to change two fixed dimension “header-width: ###px” statements to “header-width: 100%” in the media query section, and the job’s done.

Awesome! Thank you so much.

I always wanted to be an expurd, and now I are one… 8^)

@BossLady ~ with nothing more clever than rearranging the menu items a little the header should now appear to you to be no more than 60px high? Yes?