Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@amberhinds
Created May 10, 2019 14:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amberhinds/1c5d781670d80350372001dd1c5d0207 to your computer and use it in GitHub Desktop.
Save amberhinds/1c5d781670d80350372001dd1c5d0207 to your computer and use it in GitHub Desktop.
Genesis Mega Menu
@media only screen and (min-width: 1024px) {
.genesis-responsive-menu .wrap {
position: relative;
}
/* the mega menu */
.mega-menu > .sub-menu {
background-color: #fff;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 1280px;
padding: 10px 20px;
left: 0 !important; /* comment this out to have mega menu's left edge in line with the hovered menu item*/
}
/* first of the 4 columns in the mega menu */
.mega-menu > .sub-menu > li:nth-of-type(4n+1) {
clear: left;
}
/* each column in the mega menu */
.mega-menu > .sub-menu > li {
width: 25%;
float: left;
}
/* show the contents (3rd level) of each of the columns */
.mega-menu:hover li ul {
display: block !important;
}
.genesis-nav-menu li.mega-menu li ul {
opacity: 1;
border-top: none;
}
.genesis-nav-menu .sub-menu .sub-menu {
position: relative;
top: auto;
left: auto;
margin: 0;
width: 100%;
}
/* make list items appear one below the other in columns */
.genesis-nav-menu .sub-menu .sub-menu li {
display: block;
}
/* remove border from menu items inside the mega menu */
.mega-menu .sub-menu a {
border: none;
}
/* column titles */
.mega-menu > ul > li > a:first-child {
font-weight: bold;
width: 90%;
border-bottom: 1px solid #eee;
}
/* menu item links in the mega menu */
.mega-menu .sub-menu a {
padding: 15px 20px;
line-height: 1.2;
width: 100%;
background-color: transparent;
}
.mega-menu ul li a:hover {
background-color: rgba(0, 0, 0, 0.03);
/*opacity: 0.7;*/
text-decoration: none;
color: #333;
}
.mega-menu > ul > li > a:first-child:hover {
background-color: transparent;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment