Responsive Header Media Query Styles

Header "Default" Info:

@media query trigger point: 1st
Effect of Default styles: 1st trigger point = The Header Title Area and Header Right (Widget Area) will span the full width of your Header with the Header Right area displaying below the Header Title Area, ensuring the Title Area and Widget Area content have room to display. The Title and Tagline (or logo image) will be centered.

Default Code:

1st trigger point:
body.override .site-header .wrap, .title-area, .site-header .widget-area { width: 100%; } .title-area { height: 84px; padding-left: 0; text-align: center; float: none; } .site-header .widget-area { padding: 0; } .header-image .site-header .wrap .title-area { margin: 0 auto; float: none; }
	

Header "Delayed" Info:

@media query trigger point: 2nd & 4th
Effect of Delayed styles: 2nd trigger point = The Header Right (Widget Area) remains next to the Header Title Area allowing your Header content to display side-by-side on larger mobile devices. 4th trigger point = The Header Title Area and Header Right (Widget Area) will span the full width of your Header with the Header Right area displaying below the Header Title Area, ensuring the Title Area and Widget Area content have room to display. The Title and Tagline (or logo image) will be centered.

Delayed Code:

2nd trigger point:
body.override .site-header .wrap { width: 100%; } .title-area { width: 320px; } .site-header .widget-area { width: auto; max-width: 680px; }
	
4th trigger point:
body.override .site-header .wrap, .title-area, .site-header .widget-area { width: 100%; } .title-area { height: 88px; padding-left: 0; text-align: center; float: none; } .site-header .widget-area { padding: 0; } .header-image .site-header .wrap .title-area { margin: 0 auto; float: none; }