How to move Header Image into Primary Navigation in Magazine Pro

This tutorial provides the steps to:

• remove site header
• add custom header image in the primary navigation menu

in Magazine Pro.

Before:

After:

Step 1

If you have not already, upload/select your desired logo image in the Customizer in the “Header Image” section.

Step 2

Add the following in Magazine Pro’s functions.php:

// Remove Site Header.
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );

add_action( 'wp_head', 'custom_home_menu_item_background' );
/**
 * Set header image (if set) as background for Home menu item.
 */
function custom_home_menu_item_background() {
    if ( ! get_header_image() ) {
        return;
    } ?>

    <style type="text/css">
        .nav-primary li.menu-item-home a {
            background-image: url(<?php echo get_header_image(); ?>);
            background-repeat: no-repeat;
            background-size: contain;
            text-indent: -9999em;
            width: 190px;
            height: 45px;
            padding: 0;
        }

        @media only screen and (max-width: 840px) {

            .nav-primary.genesis-responsive-menu li.menu-item-home a {
                margin: 15px 0 15px 15px;
            }

        }
    </style>
    <?php
}

Step 3

Add the following in style.css:

.nav-secondary {
    margin-top: 100px;
    padding-top: 0;
}

.nav-secondary .wrap {
    border-top: 1px solid #222;
}

.genesis-nav-menu .menu-item {
    vertical-align: middle;
}

@media only screen and (max-width: 1180px) {

    .nav-primary {
        position: static;
    }

    .nav-secondary {
        margin-top: 50px;
    }

}

Step 4

Add Home menu item (Custom Link under Pages) to Primary Navigation at the top of other menu items.

Remove first CSS class (if set) for the menu item below Home menu item.

Reference: https://sridharkatakam.com/split-navigation-menu-items-logos-left-right-genesis/