Reply To: HTML5/Genesis 2.0 sticky header

Homepage Community Forums Epik Theme Support HTML5/Genesis 2.0 sticky header Reply To: HTML5/Genesis 2.0 sticky header

#6539
Terence
Customer

    @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?