Last active
November 15, 2015 22:45
-
-
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.
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
/* 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