Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<?php // Do not add this line
// Reduce the primary navigation menu to two levels depth.
add_filter( 'wp_nav_menu_args', 'genesis_sample_primary_menu_args' );
function genesis_sample_primary_menu_args( $args ) {
if ( 'primary' != $args['theme_location'] ) {
return $args;
}
$args['depth'] = 2;
return $args;
}
/* Already in genesis sample theme */
.genesis-nav-menu .sub-menu .sub-menu {
margin: -56px 0 0 199px;
}
/* Add the following below it */
.genesis-nav-menu .megamenu .sub-menu {
background-color: #fff; /* same color as .genesis-nav-menu .sub-menu a */
border: 1px solid #eee; /* optional, if a border is desired */
height: auto;
width: 610px; /* make width needed plus 10px */
column-count: 3; /* optional to change the order of the items to be vertical */
column-gap: 0; /* optional to change the order of the items to be vertical */
}
.genesis-nav-menu .megamenu.move .sub-menu {
right: 0;
} /* optional to right align the sub-menu */
.genesis-nav-menu .megamenu .sub-menu a {
border: 0; /* optional */
width: 200px; /* 1/3 width for 3 columns */
/* width: 300px; /* 1/2 width for 2 columns */
}
/* Mobile Menu
This is not needed for mobile-first themes - see blog post for this.
Find section @media only screen and (max-width: 1023px) {
In that section find, already in genesis sample theme
*/
.js .genesis-nav-menu .sub-menu .sub-menu {
margin: 0;
}
/* Add the following below it */
.genesis-nav-menu .megamenu .sub-menu {
column-count: 0; /* optional if added above */
overflow: hidden;
width: 100%;
}
.genesis-nav-menu .megamenu .sub-menu a {
width: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.