Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Mega Menu Drop Down for Genesis Themes using CSS - https://amethystwebsitedesign.com/mega-menu-for-genesis-themes-using-css
<?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 */
}
.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
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 {
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