Naviagtion Bar or say Nav-bar is used in any website where all the essential option are mentioned , also it have the context of the project idea .
You can add these mentioned classes to create a navigation bar in your website
| <nav class="nav-bar d-flex"> | |
| <a href="/" class="btn-link d-inline_block"> | |
| <h1 class="head-lg">MyWebsite</h1></a> | |
| <div class="search-container position-rel"> | |
| <input | |
| class="text-center padding-xs form-field border-radius-xs padding-xs text-sm" | |
| type="text" | |
| placeholder="Search" | |
| /> | |
| <i class="fas fa-search position-abs top-50 left-0 tranform"></i> | |
| </div> | |
| <a class="btn btn-primary btn-link margin-xs d-inline_block"> | |
| SignUp | |
| </a> | |
| <a class="btn btn-secondary btn-link margin-xs d-inline_block"> | |
| Login | |
| </a> | |
| <a class="badge-container d-inline_block margin-md"> | |
| <i class="far fa-heart badge-link"></i> | |
| <span | |
| class="badge-icon top-0 left-100 position-abs translate-topright badge-status-offline border-radius-xl"> | |
| 2 | |
| </span> | |
| </a> | |
| <a class="badge-container d-inline_block margin-md"> | |
| <i class="fas fa-shopping-cart badge-link"></i> | |
| <span | |
| class="badge-icon top-0 left-100 position-abs translate-topright badge-status-offline border-radius-xl"> | |
| 2 | |
| </span> | |
| </a> | |
| <a class="btn-link d-inline_block"><h2>Cart</h2></a> | |
| </nav> |