Split Navigation with menu items on logo’s left and right in Genesis

April 24, 2018: The tutorial on this page is for an older version of Genesis Sample. For v2.6.0 and above, follow this instead.

The theme version is yet to be updated.

Updated on July 03, 2017

If you’d like to purchase a theme version of this tutorial, get it here.

In the past, I wrote about splitting the menu items of a nav bar into left and right areas with header image (logo) in the middle here. That tutorial relied on a (commercial) plugin WP Nav Plus.

In this article, I present a better, cleaner and easier method to achieve the same.

Benefits of this approach over others:

• Does not need a plugin
• No negative margins or absolute positioning or other CSS hacks
• No need to have the menu items split into two separate primary and secondary menus

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Edit child theme’s functions.php.

a) Decide the size of your image logo and specify twice its dimensions in the custom header add theme support function call.

In this example, I would like to display the logo 100px x 100px. Hence I am going to change the width and height to 200px each.

i.e., change

//* Add support for custom header
add_theme_support( 'custom-header', array(
    'width'           => 600,
    'height'          => 160,
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'flex-height'     => true,
) );

to

//* Add support for custom header
add_theme_support( 'custom-header', array(
    'width'           => 200,
    'height'          => 200,
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'flex-height'     => true,
) );

b) Add

// if header image is set, remove Header Right widget area and inject CSS to apply the header image as background image for home menu item and more
add_action( 'wp_head', 'sk_home_menu_item_background_image' );
function sk_home_menu_item_background_image() {

    if ( get_header_image() ) {
        // Remove the header right widget area
        unregister_sidebar( 'header-right' ); ?>

        <style type="text/css">
            .nav-primary li.menu-item-home a {
                background-image: url(<?php echo get_header_image(); ?>);
                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 }

}

Set the width and height for .nav-primary li.menu-item-home a to those of your desired logo image display size.

Step 2

Add the following in child theme’s style.css:

.header-image .site-title > a {
    min-height: 100px;
}

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

}

Set the minimum height of .header-image .site-title > a to that of your desired logo image display size.

Step 3

At Appearance > Header, upload/select your desired logo image.

Step 4

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.

That’s it!

Note: You may be wondering why all that CSS (other than the line to set background image) need to be added via PHP in Step 1b when it can be done via style.css. The reason is to ensure that site header and primary nav look okay on the front end in the case when the header image has not been set.