• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Reposition Secondary menu below Primary Menu in Genesis Sample

Last Updated on July 6, 2019 Favorited: 1 times

This tutorial provides the steps to reposition the secondary menu below the primary menu, after primary navigation in the Genesis Sample.

Tested on Genesis Sample 2.6.1+

STEP 1

Open functions.php and find

// Repositions the secondary navigation menu.
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_footer', 'genesis_do_subnav', 10 );

replace with

// Repositions the secondary navigation menu.
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_header', 'genesis_do_subnav', 14 );

STEP 2

Open functions.php or /config/theme-supports.php and change the menu label.

// Renames primary and secondary navigation menus.
add_theme_support(
    'genesis-menus', array(
        'primary'   => __( 'Header Menu', 'genesis-sample' ),
        'secondary' => __( 'Footer Menu', 'genesis-sample' ),
    )
);

Header Menu = Primary Menu
Footer Menu = Secondary Menu

STEP 3

Combine the Primary and Secondary Menu. Open functions.php and in this function

/**
 * Defines responsive menu settings.
 *
 * @since 2.3.0
 */
function genesis_sample_responsive_menu_settings() {

	$settings = array(
		'mainMenu'         => __( 'Menu', 'genesis-sample' ),
		'menuIconClass'    => 'dashicons-before dashicons-menu',
		'subMenu'          => __( 'Submenu', 'genesis-sample' ),
		'subMenuIconClass' => 'dashicons-before dashicons-arrow-down-alt2',
		'menuClasses'      => array(
			'combine' => array(
				'.nav-primary',
			),
			'others'  => array(),
		),
	);

	return $settings;

}

find

			'combine' => array(
				'.nav-primary',
			),

replace with/add ‘.nav-secondary’,

			'combine' => array(
				'.nav-primary',
				'.nav-secondary',
			),

OR in /config/responsive-menus.php

        'menuClasses' => array(
            'others' => array( '.nav-primary' ),
        ),

        'menuClasses'      => array(
            'combine' => array(
                '.nav-primary',
                '.nav-secondary',
            ),
            'others'  => array(),
        ),

STEP 4

Secondary Menu doesn’t support sub-menu by default. Open functions.php and find the function

add_filter( 'wp_nav_menu_args', 'genesis_sample_secondary_menu_args' );
/**
 * Reduces secondary navigation menu to one level depth.
 *
 * @since 2.2.3
 *
 * @param array $args Original menu options.
 * @return array Menu options with depth set to 1.
 */
function genesis_sample_secondary_menu_args( $args ) {

	if ( 'secondary' !== $args['theme_location'] ) {
		return $args;
	}

	$args['depth'] = 1;
	return $args;

}

and change the depth to 2

	$args['depth'] = 2;

STEP 5

Add some CSS in style.css

.nav-secondary {
    clear: both;
    line-height: 1;
    width: 100%;
    margin-top: 0;
}

.nav-secondary .genesis-nav-menu a {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 12px;
    padding-top: 12px;
    margin: 0;
    margin-bottom: 10px;
    line-height: 15px;
}

Related Posts

  • Responsive Hamburger Menu design in Genesis
  • Magazine style Singular Post Design in Genesis Sample
  • Post Page Blog Archive Template with Layouts in Genesis
  • Site Inner with container background in Genesis Sample
  • Off-Canvas side slide in-out responsive menu in Genesis Sample

Categories: Free Content Tags: Genesis Sample, reposition menu, responsive menu

Reader Interactions

Comments

  1. wonderwoman says

    August 21, 2020 at 6:50 am

    wasn’t able to get it to work on v3.3 of sample theme

    • Aryan Raj says

      August 21, 2020 at 2:38 pm

      Please share the details via email. You can try different hook and a higher/lower priority with 10, 14,15 or 20. You can find the hook location here https://popwp.com/genesis-hooks/

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service