Skip to content

Instantly share code, notes, and snippets.

@cjkoepke
Last active November 15, 2015 22:45
Show Gist options
  • Save cjkoepke/2800d8d7a973a32e3c8d to your computer and use it in GitHub Desktop.
Save cjkoepke/2800d8d7a973a32e3c8d to your computer and use it in GitHub Desktop.
Apply a fixed nav to the left of the viewport. Styled to accommodate Icons in the menu.
/* Primary Navigation
--------------------------------------------- */
.nav-primary {
background-color: #242831;
height: 100%;
left: 0;
position: fixed; /* Make our navigation stick to the left of the viewport at all times */
top: 0;
width: 80px;
z-index: 9999;
}
.admin-bar .nav-primary {
top: 32px; /* When the admin bar is present, adjust our nav accordingly */
}
.nav-primary > .wrap {
padding: 0;
}
.nav-primary .genesis-nav-menu a:hover,
.nav-primary .genesis-nav-menu a:focus,
.nav-primary .genesis-nav-menu .menu-item > a:hover:before,
.nav-primary .genesis-nav-menu .menu-item.current-menu-item > a,
.nav-primary .genesis-nav-menu .menu-item.current-menu-item > a:before {
color: #fff;
text-decoration: none;
}
.nav-primary .genesis-nav-menu a {
background-color: #242831;
color: #57595d;
display: block;
height: 79px; /* Compensate for 1px bottom border */
padding: 0;
text-decoration: none;
text-transform: uppercase;
width: 80px;
}
.nav-primary .genesis-nav-menu .menu-item {
border-bottom: 1px solid #3d4652;
display: block;
height: 80px;
position: relative;
text-align: left;
width: 80px;
}
.nav-primary .genesis-nav-menu .menu-item:before {
display: none; /* Hide the pseudo-element applied to the original menu-item since we've moved that class to the anchor tag */
}
.nav-primary .genesis-nav-menu .menu-item > a:before {
background-color: #242831;
border-left: 5px solid transparent;
color: rgba(255,255,255,.4);
display: block;
font-size: 34px;
left: 0;
height: 79px; /* Compensate for 1px border-bottom on the parent menu-item */
padding: 23px 26px 22px 21px;
position: absolute;
width: 80px;
z-index: 10;
}
.nav-primary .genesis-nav-menu a > span {
background-color: #3d4652;
border-right: 5px solid #242831;
color: #fff;
display: block;
left: 0;
transform: translateX(-100%); /* Hide our text by moving it all the way to the left, under the icon */
font-weight: bold;
opacity: 0;
padding: 32px 30px 31px;
position: fixed; /* Position the text relative to the viewport, not the nav */
white-space: nowrap; /* Let our text stay on one line */
z-index: -1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment