Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body {
- margin: 0;
- padding: 0;
- background: #ccc;
- }
- .nav ul {
- list-style: none;
- background-color: #444;
- text-align: center;
- padding: 0;
- margin: 0;
- }
- .nav li {
- font-family: 'Oswald', sans-serif;
- font-size: 1.2em;
- line-height: 40px;
- height: 40px;
- border-bottom: 1px solid #888;
- }
- .nav a {
- text-decoration: none;
- color: #fff;
- display: block;
- transition: .3s background-color;
- }
- .nav a:hover {
- background-color: #005f5f;
- }
- .nav a.active {
- background-color: #fff;
- color: #444;
- cursor: default;
- }
- @media screen and (min-width: 600px) {
- .nav li {
- width: 120px;
- border-bottom: none;
- height: 50px;
- line-height: 50px;
- font-size: 1.4em;
- }
- /* Option 1 - Display Inline */
- .nav li {
- display: inline-block;
- margin-right: -4px;
- }
- /* Options 2 - Float
- .nav li {
- float: left;
- }
- .nav ul {
- overflow: auto;
- width: 600px;
- margin: 0 auto;
- }
- .nav {
- background-color: #444;
- }
- */
- }
- html ====
- <body class="news">
- <header>
- <div class="nav">
- <ul>
- <li class="home"><a href="#">Home</a></li>
- <li class="tutorials"><a class="active" href="#">Tutorials</a></li>
- <li class="about"><a href="#">About</a></li>
- <li class="news"><a href="#">Newsletter</a></li>
- <li class="contact"><a href="#">Contact</a></li>
- </ul>
- </div>
- </header>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement