Skip to content

Instantly share code, notes, and snippets.

@netviperinc
Last active August 29, 2015 14:23
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 netviperinc/10be8f0581fcf57314e5 to your computer and use it in GitHub Desktop.
Save netviperinc/10be8f0581fcf57314e5 to your computer and use it in GitHub Desktop.
/* Responsive Navigation
---------------------------------------------------------------------------------------------------- */
/* Standard Navigation
--------------------------------------------- */
nav {
clear: both;
}
/* Navigation toggles
--------------------------------------------- */
.sub-menu-toggle,
.c-hamburger {
display: none;
visibility: hidden;
}
/* Navigation toggles - Ensure Menu Displays when Scaled Up
--------------------------------------------- */
@media only screen and (min-width: 768px) {
nav {
display: block !important;
}
}
/* Navigation toggles - Mobile (Change max width as you see fit)
--------------------------------------------- */
@media only screen and (max-width: 767px) {
.c-hamburger,
.sub-menu-toggle {
display: block;
font-size: 20px;
font-size: 2rem;
font-weight: 700;
margin: 0 auto;
overflow: hidden;
padding: 20px;
padding: 2rem;
text-align: center;
visibility: visible;
}
button.sub-menu-toggle {
background-color: transparent;
color: #999;
}
.sub-menu-toggle {
padding: 18px;
padding: 1.8rem;
position: absolute;
right: 0;
top: 0;
}
.sub-menu-toggle:before {
content: "+";
}
.sub-menu-toggle.is-active:before {
content: "-";
}
nav {
display: none;
position: relative;
}
.genesis-nav-menu .menu-item {
background-color: #f5f5f5;
display: block;
position: relative;
text-align: left;
}
.genesis-nav-menu .menu-item:hover {
position: relative;
}
.genesis-nav-menu .sub-menu {
clear: both;
display: none;
opacity: 1;
position: static;
width: 100%;
}
.genesis-nav-menu .sub-menu a {
border-left: 0;
position: relative;
width: auto;
}
.genesis-nav-menu .sub-menu .sub-menu {
margin: 0;
}
.genesis-nav-menu .sub-menu .sub-menu a {
background-color: #f5f5f5;
padding-left: 30px;
}
.genesis-nav-menu .sub-menu .sub-menu .sub-menu a {
background-color: #fff;
padding-left: 40px;
}
.nav-primary a:hover,
.nav-primary .current-menu-item > a {
color: #333;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment