Responsive Navbar

Loading…

Responsive Navbar | GoSnippets

Source Code

1<nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm">
2  <div class="container">
3    <a class="navbar-brand fw-bold" href="#">
4      <span class="text-white">My</span><span class="text-warning">Brand</span>
5    </a>
6    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
7      data-bs-target="#navMain" aria-controls="navMain"
8      aria-expanded="false" aria-label="Toggle navigation">
9      <span class="navbar-toggler-icon"></span>
10    </button>
11    <div class="collapse navbar-collapse" id="navMain">
12      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
13        <li class="nav-item">
14          <a class="nav-link active" href="#">Home</a>
15        </li>
16        <li class="nav-item">
17          <a class="nav-link" href="#">Features</a>
18        </li>
19        <li class="nav-item">
20          <a class="nav-link" href="#">Pricing</a>
21        </li>
22        <li class="nav-item">
23          <a class="nav-link" href="#">About</a>
24        </li>
25      </ul>
26      <div class="d-flex gap-2">
27        <a href="#" class="btn btn-outline-light btn-sm">Log in</a>
28        <a href="#" class="btn btn-warning btn-sm fw-semibold">Sign up</a>
29      </div>
30    </div>
31  </div>
32</nav>

Source Code

More Navbar snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery