ellenbo
2/19/2014 - 10:05 PM

WordPress | Genesis Framework: Nav | Logo | Nav menu using a custom three part header area

WordPress | Genesis Framework: Nav | Logo | Nav menu using a custom three part header area

Create a left menu and a right menu and put in respective widget areas. Put logo in the center header widget area.
genesis_register_sidebar( array(
'id' => 'custom-header-left',
'name' => __( 'Custom Header Left', 'theme-prefix' ),
'description' => __( 'This is the left custom header.', 'theme-prefix' ),
) );

genesis_register_sidebar( array(
'id' => 'custom-header-center',
'name' => __( 'Custom Header Center', 'theme-prefix' ),
'description' => __( 'This is the center custom header.', 'theme-prefix' ),
) );

genesis_register_sidebar( array(
'id' => 'custom-header-right',
'name' => __( 'Custom Header Right', 'theme-prefix' ),
'description' => __( 'This is the right custom header.', 'theme-prefix' ),
) );

add_action( 'genesis_before_header', 'custom_header_menu' );

function custom_header_menu() {
 
	echo '<div class="custom-header-bar"><div class="wrap">';
 
	genesis_widget_area( 'custom-header-left', array(
		'before' => '<div class="custom-header-left">',
		'after' => '</div>',
	) );
 
	genesis_widget_area( 'custom-header-center', array(
		'before' => '<div class="custom-header-center">',
		'after' => '</div>',
	) );
	
	genesis_widget_area( 'custom-header-right', array(
		'before' => '<div class="custom-header-right">',
		'after' => '</div>',
	) );
 
	echo '</div></div>';
 
}
@media only screen and (min-width: 1025px) {

	/* Nav | Logo | Nav */

	.custom-header-bar
	{
		font-family: chisel-normal, sans-serif;
		font-size: 16px;
		font-size: 1.15vw;
		line-height: 1.5;
		margin-left: auto;
		margin-right: auto;
	}


	.custom-header-left
	{
		width: 40%;
		float: left;
		border-top: 4px double #d3d3d3;
		border-bottom: 4px double #d3d3d3;
		color: #d3d3d3;
		margin-top: 55px;
		margin-top: 5.3vw;
		padding-top: 20px;
		padding-top: 1.5vw;
		padding-bottom: 20px;
		padding-bottom: 1.5vw;
	}

	.custom-header-center 
	{
		width: 20%;
		max-width: 20%;
		float: left;
		text-align: center;
		margin-left: 0px;
		margin-right: 0px;
		padding: 0px;
	}

	.custom-header-center img
	{
		width: 100% !important; /* Need for Firefox */ /* NOT WORKING IN @#$% IE */
		max-width: 100% !important;
		height: auto;
		position: relative; /* Contains the image in the div */
		top:0; /* Aligns Vertically */
		bottom:0; /* Aligns Vertically */
	}

	.custom-header-right
	{
		width: 40%;
		float: right;
		border-top: 4px double #d3d3d3;
		border-bottom: 4px double #d3d3d3;
		color: #d3d3d3;
		margin-top: 55px;
		margin-top: 5.3vw;
		padding-top: 20px;
		padding-top: 1.5vw;
		padding-bottom: 20px;
		padding-bottom: 1.5vw;
	}

	.custom-header-left li, .custom-header-right li
	{
		display: inline;
	}

	.custom-header-left li
	{
		float: right;
	}

	.custom-header-right li
	{
		float: left;
	}

	.custom-header-bar a
	{
		padding: 0px 16px !important;
		padding: 0vw 1.6vw;
		text-transform: uppercase;
	}

	.nav-primary
	{
		display: none;
	}

	.header-image .site-header .wrap {
		display: none;
	}	

	.custom-header-bar  .sub-menu a:hover {
		color: #333;
	}

	.custom-header-bar .menu-item:hover > .sub-menu {
		left: auto;
		opacity: 1;
	}

	.custom-header-bar .sub-menu a {
		background-image: url(backgrounds/lightpaperfibers_@2X.png);	
  		background-repeat:repeat;
		border: 1px solid #eee;
		border-top: none;
		font-family: chisel-normal, sans serif;
		font-size: 14px;
		font-size: 1.0vw;
		
		padding-top: 20px !important;
		padding-bottom: 20px !important;
		
		width: 300px;
		margin: 0px;
	}

	.custom-header-bar .sub-menu li
	{
		margin-top: 35px;
		margin-top: 2.2vw;
	}

	.custom-header-bar .sub-menu {
		left: -9999px;
		opacity: 0;
		position: absolute;
		-webkit-transition: opacity .4s ease-in-out;
		-moz-transition:    opacity .4s ease-in-out;
		-ms-transition:     opacity .4s ease-in-out;
		-o-transition:      opacity .4s ease-in-out;
		transition:         opacity .4s ease-in-out;
		width: 200px;
		z-index: 99;
	}

	.custom-header-bar .sub-menu .current-menu-item > a {
		color: #999;
	}

	.custom-header-bar .sub-menu .sub-menu {
		margin: -54px 0 0 199px;
	}
	
}