A split navigation menu in Genesis with logo in the middle
At Appearance > Menus, edit your primary menu. Add a “Home” menu item (Pages section > View All tab > tick Home > Add to Menu button) and move it so it is in the middle with menu items above and below it.
@media only screen and (min-width: 1024px) {
.nav-primary li.menu-item-home a {
background-repeat: no-repeat;
background-size: contain;
margin: 0 10px;
}
}
@media only screen and (max-width: 1023px) {
.nav-primary .genesis-nav-menu .menu-item.menu-item-home {
display: none;
}
}
/* In existing 960 media query, delete Header Menu section */
*/ Change .nav-primary to */
.nav-primary {
float: none;
width: 100%;
}
// If custom logo is set, inject CSS to apply the header image as background image for home menu item
add_action( 'wp_head', 'sk_home_menu_item_background_image' );
function sk_home_menu_item_background_image() {
if ( function_exists( 'the_custom_logo' ) ) {
$custom_logo_id = get_theme_mod( 'custom_logo' );
$image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
?>
<style type="text/css">
.nav-primary li.menu-item-home a {
background-image: url(<?php echo $image[0]; ?>);
text-indent: -9999em;
width: 100px;
height: 100px;
}
@media only screen and (min-width: 1024px) {
.site-header > .wrap {
padding: 0;
}
.title-area {
display: none;
}
.nav-primary {
padding: 20px 0;
}
.menu-primary {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; /* center flex items horizontally */
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; /* center flex items vertically */
}
}
</style>
<?php }
}