Reply To: HTML5/Genesis 2.0 sticky header

Terence, looking at what you’ve done so far, I think what you’re looking for is to prevent your top widget (slider in this case) from being covered by the menu/header when it is in mobile view. I know you responded to this post over at FatMedia and I can see in Firefox that you added “padding-top” to the body. You need to also add that to the media files. I used the example of 81px/8.1rem from the FatMedia article as a starting place and it worked for me, but you may have to tinker with it. Scroll to the bottom of your style sheet and find the @media only screen and (max-width 1039), around line 3876 and add

	body {
		padding-top: 81px;
		padding-top: 8.1rem;
	}

In media files you only have to add css where you want it to start doing a certain behavior. It will continue with that behavior until you tell it something new. So you only have to add it once. I think (for me) it could use a little more padding, but 81px looks fantastic when it hits the 1023 break-point. So I might bump it up a little in the 1039 section and add it again to the 1023 with the 81px/8.1rem for the padding. Like I said, you may have to tinker a bit with the padding to get it where you want it.

Hope this is helpful.