Created
May 10, 2019 14:36
-
-
Save amberhinds/1c5d781670d80350372001dd1c5d0207 to your computer and use it in GitHub Desktop.
Genesis Mega Menu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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