Move Footer Menu below Site Header in Genesis


This guide is applicable for Genesis Sample theme > 2.9. For older version check this tutorial.

By default the Secondary Menu in Genesis Sample theme is placed inside Footer section. To relocate this menu to below the site header we need to follow the steps as mentioned below:-

Step 1: Open /themes/genesis-sample/config/menus.php and change the text as follows.

return array(
'primary' => ( 'Header Menu', 'genesis-sample' ), 'secondary' => ( 'Secondary Navigation', 'genesis-sample' ),
);

Step 2: Delete the following from /themes/genesis-sample/functions.php

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

Step 3: Edit Responsive menu settings from functions.php

$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',
'.nav-secondary',
),
'others' => array(),
),
);

Step 4: In /themes/genesis-sample/js/genesis-sample.js change the following line

$( '.site-inner' ).css( 'margin-top', siteInnerMarginTop );
into

$( '.nav-secondary' ).css( 'margin-top', siteInnerMarginTop );

Step 5: In /themes/genesis-sample/style.css inside the media query change the following:

 
.site-inner {
margin-top: 70px;
max-width: 1140px;
}

to

.site-inner {
margin-top: 0;
max-width: 1140px;
}

Step 6: In /themes/genesis-sample/style.css change the following:

/* Footer Menu
--------------------------------------------- */
.nav-secondary {
margin-top: 10px;
}
.nav-secondary .genesis-nav-menu {
line-height: 1.5;
}
.nav-secondary .menu-item {
display: inline-block;
}
.nav-secondary a {
margin-left: 10px;
margin-right: 10px;
padding: 0;
}
to

/* Secondary Navigation
--------------------------------------------- */
.nav-secondary {
clear: left;
padding: 15px 0;
background-color: #eee;
width: 100%;
}
.nav-secondary .menu-item {
display: inline-block;
}
.nav-secondary a {
padding: 10px 15px;
color: #333;
}

Step 7: In /themes/genesis-sample/style.css inside the media query add the following:

.nav-secondary .wrap {
max-width: 960px;
margin: 0 auto;
}

That’s it.


Leave a Reply

Your email address will not be published. Required fields are marked *