Move Primary Menu Below Header in Going Green Child Theme For Genesis

If you are just installed the Going Green Pro Child Theme for Genesis Framework, you will notice that it shows both primary and secondary navigation menus at the top of the header.

For most practical purposes, its best if one menu is at the top of the header and another at the bottom. Here’s how you can move the primary menu below the header in Going Green Theme.

First, add this code to functions.php file of the Going Green theme.

remove_action( 'genesis_before_header', 'genesis_do_nav' );
add_action( 'genesis_after_header', 'genesis_do_nav' );

Now, add this code at the end of style.css file of the theme,

.site-inner {
margin: 0 auto;
margin: 0rem auto;
}
.site-header {
padding: 40px 0;
padding: 4rem 0;
}

This will move the primary menu in the theme below the header as shown in the image below.

Once you do this, you will notice that the secondary menu at the top blends into the header. Its a good idea to change its background color a bit to make it stand out. You can do this by adding this code at the end of style.css file,

.nav-secondary {
background-color: #287241;
}

Here, I have added the same background color as primary menu, but you can use any color code as needed. You can use this online color picker tool to get the color code for the color of your choice.