Last active
January 22, 2020 18:17
-
-
Save jesperdj/9162424f9a37d8a4fde91683d94446ba to your computer and use it in GitHub Desktop.
Navbar with CSS flexbox example
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <link rel="stylesheet" href="style.css"> | |
| <title>Flex Navbar</title> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="logo"><a href="/">Flex Navbar</a></div> | |
| <div class="space"></div> | |
| <nav class="nav"> | |
| <ul> | |
| <li><a href="#">Products</a></li> | |
| <li><a href="#">Services</a></li> | |
| <li><a href="#">About</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <main> | |
| <h1>Navbar with flexbox example</h1> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos similique, animi commodi, dicta corrupti | |
| tenetur quibusdam nihil ea nobis adipisci provident quis iste! Architecto quae asperiores fuga eum! | |
| Consequuntur expedita culpa officia voluptatibus non assumenda ea maiores doloremque hic. Neque, officiis | |
| fuga? Obcaecati repellat molestiae quod culpa reiciendis quae numquam similique ad pariatur possimus illo | |
| ducimus earum ea facere accusamus unde voluptas rem corrupti labore tempora cupiditate quo eum, itaque | |
| voluptates? Voluptates quo, corporis earum explicabo, in quod accusantium ipsam laudantium distinctio, vero | |
| mollitia libero facere voluptate odit totam delectus quis! Quia eveniet veritatis reprehenderit optio | |
| numquam aut sit doloribus?</p> | |
| </main> | |
| </body> | |
| </html> |
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
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: Arial, Helvetica, sans-serif; | |
| font-size: 16px; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: white; | |
| } | |
| body > header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| height: 48px; | |
| overflow: hidden; | |
| background-color: #0048dd; | |
| color: white; | |
| box-shadow: 0 2px 4px #888888; | |
| display: flex; | |
| } | |
| .logo { | |
| margin: 0; | |
| padding: 0 1em; | |
| line-height: 48px; /* Centers text vertically */ | |
| font-size: 150%; | |
| font-weight: bold; | |
| } | |
| .logo:hover { | |
| background-color: #1763ff; | |
| } | |
| .space { | |
| flex-grow: 1; /* Causes this element to take up the remaining space, pushing logo and nav to the left and right sides */ | |
| } | |
| .nav { | |
| margin: 0; | |
| padding: 0; | |
| font-weight: bold; | |
| } | |
| .nav > ul { | |
| margin: 0; | |
| padding: 0; | |
| line-height: 48px; /* Centers text vertically */ | |
| list-style-type: none; | |
| } | |
| .nav > ul > li { | |
| padding: 0 1em; | |
| display: inline-block; | |
| } | |
| .nav > ul > li:hover { | |
| background-color: #1763ff; | |
| } | |
| main { | |
| margin-top: 48px; /* Top margin as high as the navbar, to prevent content from disappearing under the navbar */ | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment