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;
}
}