Tạo responsive header cho website bằng Bootstrap 5

Chuẩn bị

• Cài đặt Bootstrap
• Cài đặt Font Awesome

Code

HTML<nav class="navbar sticky-top navbar-expand-lg navbar-light navbar-default">
  <div class="container">
    <a class="navbar-brand" href="#"><span class="logo-name">Nguyễn Quốc Dũng</span></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"
      aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <form class="search-form">
        <input class="search-input" type="search" placeholder="Search" aria-label="Search">
        <button class="search-button" type="submit"><i class="fa fa-search search-icon"></i></button>
      </form>
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS.navbar-default {
  background-color: #fefefe;
  color: #161617;
  fill: #161617;
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 7%);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.navbar-brand.navbar-logo {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWKvcFzqVEd6f_Gl4cAyrJf56b_Od9XlKOoOypgzxubo0pkQnO372jl4PnshzE2M9lnPs6Uh2tQ248PCuiEikNSyZw59ia4qt_Qy91NTIDqzpVSFXbXAdtM4MKPvLrB17rITU72YHuhTo/s150/dungquoc.png);
  background-repeat: no-repeat;
  background-size: 100%;
  display: inline-block;
  vertical-align: middle;
  height: 40px;
  margin-right: auto;
  margin-top: 5px;
  -webkit-transition: opacity 150ms ease-in-out;
  -o-transition: opacity 150ms ease-in-out;
  transition: opacity 150ms ease-in-out;
  width: 132px;
}

.logo-name {
  max-width: 152px;
  font-size: 18px;
  font-weight: 700;
  color: #161617;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nav-link {
  font-size: 16px;
  color: #48525c;
}

.nav-link:hover,
.nav-link.active {
  box-shadow: inset 0 -3px #161617;
  color: #161617;
  font-size: 16px;
  font-weight: 500;
}

.search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: auto 0;
}

.search-input[type="search"] {
  background-color: rgba(236, 239, 241, 0.8);
  color: #48525c;
  font-family: inherit;
  outline: 0;
  border: 0;
  border-radius: 5px;
  padding: 8px 20px 8px 45px;
  margin: auto;
  width: 50%;
  transition: box-shadow 0.3s;
  -webkit-transition: box-shadow 0.3s;
}

.search-button {
  position: absolute;
  top: 0;
  left: 27%;
  margin: auto;
  display: flex;
  height: 100%;
  align-items: center;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
}

.search-icon {
  width: 18px;
  height: 18px;
  color: #5f6368;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

Demo

Read more

• Bootstrap 5 Navbar