Skip to content

Instantly share code, notes, and snippets.

@webbyworks

webbyworks/responsive-nav-bar-no-js.css

Created September 25, 2014 12:00
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 webbyworks/c96b1d22fc576541acd4 to your computer and use it in GitHub Desktop.
Save webbyworks/c96b1d22fc576541acd4 to your computer and use it in GitHub Desktop.
Download ZIP
Create responsive nav - here's the raw CSS
Raw
responsive-nav-bar-no-js.css
header .logo { float: left }
.main-nav { display: none }
.main-nav a { text-transform: uppercase; font-size: 0.8em; display: inline-block; margin: 1em; border-bottom: 1px solid; }
.main-nav ul li { list-style-type: none; display: inline; }
.main-nav ul { clear: both; background-color: white; }
.showMenu, .hideMenu { font-size: 2.5em; float: right; }
.showMenu { display: inline-block }
.hideMenu { display: none }
.hideMenu:target { display: none }
.showMenu:target + .hideMenu { display: inline-block }
.showMenu:target { display: none }
.showMenu:target ~ .main-nav { display: inline }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment