AgentWP

  • Tutorials
  • Themes
  • Plugins
  • Services
  • Contact

How To 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.

going green theme move menu below 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.

move menu below header going green theme

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.

Get useful WordPress related tricks, tips, tutorials and reviews delivered straight to your inbox.

StudioPress - Premium Wordpress Themes
ElegantThemes - Premium Wordpress Themes

Copyright © 2023 · AGENTWP · All Rights Reserved

Copyright © 2023 · awp on Genesis Framework · WordPress · Log in