Created
July 9, 2022 15:23
-
-
Save 0x3rv/5d7e4293ae1f64cf8c751ff702ec94d5 to your computer and use it in GitHub Desktop.
Responsive Navbar / only with CSS
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
| <div class="header header-fixed"> | |
| <div class="navbar container"> | |
| <div class="logo"><a href="#home">LOGO</a></div> | |
| <input type="checkbox" id="navbar-toggle" > | |
| <label for="navbar-toggle"><i></i></label> | |
| <nav class="menu"> | |
| <ul> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#portfolio">Portfolio</a></li> | |
| <li><a href="#contacts">Contacts</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
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; | |
| } | |
| .header-fixed { | |
| position: fixed; | |
| top: 0; | |
| z-index: 1; | |
| width: 100%; | |
| background-color: rgba(21, 21, 21, 1); | |
| box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.1); | |
| } | |
| .navbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| color: #fff; | |
| line-height: 60px; | |
| } | |
| .navbar .logo { | |
| flex: 3; | |
| } | |
| .navbar .logo a { | |
| display: block; | |
| font-size: 30px; | |
| font-weight: bold; | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| .navbar .logo a:hover { | |
| color: #777777; | |
| } | |
| .navbar nav { | |
| flex: 8; | |
| } | |
| .navbar label { | |
| user-select: none; | |
| cursor: pointer; | |
| padding: 28px 20px; | |
| position: relative; | |
| z-index: 3; | |
| } | |
| .navbar label i { | |
| height: 2px; | |
| position: relative; | |
| transition: background .2s ease-out; | |
| width: 18px; | |
| font-style: normal; | |
| font-weight: normal; | |
| } | |
| .navbar label i:before, | |
| .navbar label i:after { | |
| content: ''; | |
| height: 100%; | |
| position: absolute; | |
| transition: all .2s ease-out; | |
| width: 100%; | |
| } | |
| .navbar label i, | |
| .navbar label i:before, | |
| .navbar label i:after { | |
| display: block; | |
| background: #eee; | |
| } | |
| .navbar label i:before { | |
| top: 5px; | |
| } | |
| .navbar label i:after { | |
| top: -5px; | |
| } | |
| .navbar #navbar-toggle { | |
| display: none; | |
| } | |
| .header #navbar-toggle:checked ~ .menu { | |
| visibility: visible; | |
| opacity: 0.99; | |
| } | |
| .header #navbar-toggle:checked ~ label { | |
| background: #212121; | |
| border-radius: 50%; | |
| } | |
| .header #navbar-toggle:checked ~ label i { | |
| background: transparent; | |
| } | |
| .header #navbar-toggle:checked ~ label i:before { | |
| transform: rotate(-45deg); | |
| } | |
| .header #navbar-toggle:checked ~ label i:after { | |
| transform: rotate(45deg); | |
| } | |
| .header #navbar-toggle:checked ~ label:not(.steps) i:before, | |
| .header #navbar-toggle:checked ~ label:not(.steps) i:after { | |
| top: 0; | |
| } | |
| @media (max-width: 768px) { | |
| .navbar nav { | |
| visibility: hidden; | |
| opacity: 0; | |
| z-index: 2; | |
| position: fixed; | |
| top: 0px; | |
| left: 0px; | |
| width: 100%; | |
| height: 100%; | |
| transition: all 0.3s ease-out; | |
| display: table; | |
| background: #ddd; | |
| } | |
| .navbar nav ul { | |
| margin: 0; | |
| padding: 20px 0; | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| .navbar nav li { | |
| display: block; | |
| text-align: center; | |
| padding: 20px 0; | |
| text-align: center; | |
| font-size: 50px; | |
| min-height: 50px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.3s ease-out; | |
| } | |
| .navbar nav li:hover { | |
| background: #212121; | |
| } | |
| .navbar nav li:hover a { | |
| color: #fff; | |
| transition: all 0.3s ease-out; | |
| } | |
| .navbar nav li a { | |
| color: #212121; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .navbar nav ul { | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: space-around; | |
| text-align: center; | |
| list-style: none; | |
| } | |
| .navbar nav li { | |
| flex: 1; | |
| } | |
| .navbar nav li a { | |
| display: block; | |
| padding: 0 8px; | |
| font-size: 16px; | |
| line-height: 60px; | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| .navbar nav li.active { | |
| background: #555; | |
| } | |
| .navbar nav li:hover { | |
| background: #333; | |
| } | |
| .navbar label { | |
| display: none; | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment