Skip to content

Instantly share code, notes, and snippets.

@cnichols-git

cnichols-git/menu-css

Created January 28, 2014 18:55
Show Gist options
  • Save cnichols-git/8673836 to your computer and use it in GitHub Desktop.
Save cnichols-git/8673836 to your computer and use it in GitHub Desktop.
Download ZIP
responsive-menu
Raw
menu-css
#primary-menu-icon .icon-bar {
background-color: #474747;
display: block;
width: 22px;
height: 2px;
}
@media (max-width: 979px) {
/* Primary Navigation Menu Icon properties ----------------------------------------------------------*/
#primary-menu-icon {
cursor: pointer;
display: block;
padding: 15px 0;
width: 50%;
}
#primary-menu-icon .icon-bar {
background-color: #474747;
display: block;
width: 22px;
height: 2px;
}
#primary-menu-icon .icon-bar+.icon-bar {
margin-top: 4px;
}
/* Hide Primary Navigation Menu until it's toggled via script */
.menu-primary {
display: none;
}
/* Primary Navigation Menu misc properties */
.nav-primary {
clear: both;
line-height: 1.5;
width: 100%;
z-index: 9999;
}
.nav-primary .menu-item {
display: block;
text-align: left;
}
.nav-primary a {
display: block;
padding: 10px 0;
position: relative;
}
.nav-primary a:hover,
.nav-primary .current-menu-item > a,
.nav-primary .sub-menu .current-menu-item > a:hover {
color: #474747;
}
.nav-primary .sub-menu .current-menu-item > a {
color: #FFFFFF;
}
.nav-primary .sub-menu {
left: 0px;
opacity: 1;
position: relative;
width: 100%;
z-index: 99;
}
.nav-primary .sub-menu a {
font-size: 14px;
font-size: 1.4rem;
padding: 10px 15px;
position: relative;
width: 100%;
}
.nav-primary .sub-menu a::before {
content: "- ";
font-size: 14px;
font-size: 1.4rem;
}
.nav-primary .sub-menu a:hover {
}
.nav-primary .sub-menu li li {
border: none;
}
.nav-primary .sub-menu li li a {
border: none;
padding: 10px 40px;
}
.nav-primary .sub-menu .sub-menu {
margin: 0;
}
.nav-primary .menu-item:hover {
position: static;
}
.nav-primary .menu-item:hover > .sub-menu {
left: auto;
opacity: 1;
}
.sub-menu li {
border: none;
}
Raw
menu-html
<nav class="primary navbar">
<div class="navbar-inner wrap">
<div class="nav-primary">
<div id="primary-menu-icon">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<ul id="menu-primary-navigation" class="menu genesis-nav-menu menu-primary">
<li id="menu-item" class="menu-item"><a href="http://#">Home</a></li>
<li id="menu-item-901" class="menu-item"><a href="http:// #">Shortcodes</a></li>
<li id="menu-item-902" class="menu-item"><a href="http://#">Page Layouts</a>
<ul class="sub-menu">
<li id="menu-item-907" class="menu-item"><a href="http:// #">Content – Sidebar</a></li>
<li id="menu-item-906" class="menu-item"><a href="http://#">Sidebar – Content</a></li>
<li id="menu-item-905" class="menu-item"><a href="http://#">Full Width</a></li>
</ul>
</li>
<li id="menu-item-873" class="menu-item"><a href="http://#">Blog</a></li>
<li id="menu-item-908" class="menu-item"><a href="http://#">Colors</a>
<ul class="sub-menu">
<li id="menu-item-909" class="menu-item "><a href="?color=default">Default (Gray)</a></li>
<li id="menu-item-910" class="menu-item "><a href="?color=ofp-green">Green</a></li>
<li id="menu-item-911" class="menu-item "><a href="?color=ofp-blue">Blue</a></li>
<li id="menu-item-912" class="menu-item "><a href="?color=ofp-turquoise">Turquoise</a></li>
<li id="menu-item-913" class="menu-item "><a href="?color=ofp-cabernet">Cabernet</a></li>
</ul>
</li>
<li class="right search"></li>
</ul>
</div>
</div><!--wrap-->
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment