krista-m
4/9/2018 - 10:41 PM

Split Menu

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 }

}