Skip to content

Instantly share code, notes, and snippets.

@ellenbo
Last active August 29, 2015 13:56
Show Gist options
  • Save ellenbo/9102654 to your computer and use it in GitHub Desktop.
Save ellenbo/9102654 to your computer and use it in GitHub Desktop.
WordPress | Genesis Framework: Nav | Logo | Nav menu using a custom three part header area
@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/[email protected]);
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;
}
}
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>';
}
Create a left menu and a right menu and put in respective widget areas. Put logo in the center header widget area.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment