Menu Logo Menu In Genesis Sample Themes Header

This solution adds left and right menus inline with your custom logo like this :

Tested using version 2.10 of the Genesis Sample child theme by StudioPress which only works with Genesis 3.0.

In the above example we overhang the logo however you can modify that simply by adjusting the values for margins in the following CSS rule :


.navigation-container {
    margin-bottom: 58px;
    margin-top: -120px;  
}

And this is the result :

Works with or without the sticky header.

Demo Video #

Shows 2 custom menus added to the left and right of the logo in the Genesis Sample child theme by StudioPress.

Also shows both menus combined into 1 responsive drop down menu on smaller screens.

There’s 7 steps :

Step 1 – Find this code between lines 175 – 176 in functions.php


remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_header', 'genesis_do_nav', 12 );

And modify it like this :


remove_action( 'genesis_after_header', 'genesis_do_nav' );

This removes the primary nav menu from the header.

Step 2 – Copy the PHP code from functions.php to the end of the Genesis Sample themes functions file.

Step 3 – Copy the following CSS to the end of the Genesis Sample themes style.css file and clear caching.