Last active
June 23, 2022 04:44
-
-
Save primaryobjects/5a86955d0419d64ae7f5c401bb704983 to your computer and use it in GitHub Desktop.
A simple navbar for Milligram CSS. See demo at http://jsbin.com/penodof/edit?output
This file contains 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
| <html> | |
| <body> | |
| <div class='container'> | |
| <div class='navbar'> | |
| <ul> | |
| <li><a class="active" href="#home">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </div> | |
| <h1>Hello World</h1> | |
| <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"> | |
| <link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css"> | |
| <link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css"> | |
| <link rel="stylesheet" href="style.css" /> | |
| </body> | |
| </html> |
This file contains 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
| .navbar { | |
| margin-bottom: 10px; | |
| } | |
| .navbar ul { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| background-color: #606c76; | |
| } | |
| .navbar li { | |
| float: left; | |
| margin-bottom: 0; | |
| } | |
| .navbar li a { | |
| display: block; | |
| color: white; | |
| text-align: center; | |
| padding: 14px 16px; | |
| text-decoration: none; | |
| } | |
| .navbar li a:hover { | |
| background-color: #ab5dda; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
active isn't defined. Maybe add
.navbar li .active { font-weight: bold; }