How to make Bootstrap Navbar transparent

Creating a transparent navbar is very easy - just don't add a color class .bg-* to the navbar.

In this case, the Navbar will take the color of the parent's background color.

HTML

        
            
          <!-- Navbar -->
          <nav class="navbar navbar-expand-lg navbar-light">
            <!-- Container wrapper -->
            <div class="container-fluid">
              <!-- Navbar brand -->
              <a class="navbar-brand" href="#">Brand</a>

              <!-- Toggle button -->
              <button
                class="navbar-toggler"
                type="button"
                data-mdb-toggle="collapse"
                data-mdb-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <i class="fas fa-bars"></i>
              </button>

              <!-- Collapsible wrapper -->
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <!-- Left links -->
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                  </li>
                  <!-- Navbar dropdown -->
                  <li class="nav-item dropdown">
                    <a
                      class="nav-link dropdown-toggle"
                      href="#"
                      id="navbarDropdown"
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      Dropdown
                    </a>
                    <!-- Dropdown menu -->
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <li>
                        <a class="dropdown-item" href="#">Action</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Another action</a>
                      </li>
                      <li><hr class="dropdown-divider" /></li>
                      <li>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
                      >Disabled</a
                    >
                  </li>
                </ul>
                <!-- Left links -->
              </div>
              <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
          </nav>
          <!-- Navbar -->

HTML

        
            
          <!-- Navbar -->
          <nav class="navbar navbar-expand-lg navbar-dark shadow-5-strong">
            <!-- Container wrapper -->
            <div class="container-fluid">
              <!-- Navbar brand -->
              <a class="navbar-brand" href="#">Brand</a>

              <!-- Toggle button -->
              <button
                class="navbar-toggler"
                type="button"
                data-mdb-toggle="collapse"
                data-mdb-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <i class="fas fa-bars"></i>
              </button>

              <!-- Collapsible wrapper -->
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <!-- Left links -->
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                  </li>
                  <!-- Navbar dropdown -->
                  <li class="nav-item dropdown">
                    <a
                      class="nav-link dropdown-toggle"
                      href="#"
                      id="navbarDropdown"
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      Dropdown
                    </a>
                    <!-- Dropdown menu -->
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <li>
                        <a class="dropdown-item" href="#">Action</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Another action</a>
                      </li>
                      <li><hr class="dropdown-divider" /></li>
                      <li>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
                      >Disabled</a
                    >
                  </li>
                </ul>
                <!-- Left links -->
              </div>
              <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
          </nav>
          <!-- Navbar -->

HTML

        
            
          <!-- Navbar -->
          <nav class="navbar navbar-expand-lg navbar-dark shadow-5-strong">
            <!-- Container wrapper -->
            <div class="container-fluid">
              <!-- Navbar brand -->
              <a class="navbar-brand" href="#">Brand</a>

              <!-- Toggle button -->
              <button
                class="navbar-toggler"
                type="button"
                data-mdb-toggle="collapse"
                data-mdb-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <i class="fas fa-bars"></i>
              </button>

              <!-- Collapsible wrapper -->
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <!-- Left links -->
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                  </li>
                  <!-- Navbar dropdown -->
                  <li class="nav-item dropdown">
                    <a
                      class="nav-link dropdown-toggle"
                      href="#"
                      id="navbarDropdown"
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      Dropdown
                    </a>
                    <!-- Dropdown menu -->
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <li>
                        <a class="dropdown-item" href="#">Action</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">Another action</a>
                      </li>
                      <li><hr class="dropdown-divider" /></li>
                      <li>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
                      >Disabled</a
                    >
                  </li>
                </ul>
                <!-- Left links -->
              </div>
              <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
          </nav>
          <!-- Navbar -->

Animated navbar

You can achieve a very impressive effect by using our animated navbar, which is transparent on start, and change the color after the scroll.

Note: This component requires MDBootstrap Pro package.

Click the button below to see the full-screen demo.

Full screen demo

HTML

        
            
            <!--Main Navigation-->
            <header>
              <!-- Animated navbar-->
              <nav class="navbar navbar-expand-lg fixed-top navbar-scroll">
                <div class="container-fluid">
                  <button
                    class="navbar-toggler ps-0"
                    type="button"
                    data-mdb-toggle="collapse"
                    data-mdb-target="#navbarExample01"
                    aria-controls="navbarExample01"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                  >
                    <span
                      class="navbar-toggler-icon d-flex justify-content-start align-items-center"
                    >
                      <i class="fas fa-bars"></i>
                    </span>
                  </button>
                  <div class="collapse navbar-collapse" id="navbarExample01">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                      <li class="nav-item active">
                        <a class="nav-link" aria-current="page" href="#intro">Home</a>
                      </li>
                      <li class="nav-item">
                        <a
                          class="nav-link"
                          href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"
                          rel="nofollow"
                          target="_blank"
                          >Learn Bootstrap 5</a
                        >
                      </li>
                      <li class="nav-item">
                        <a
                          class="nav-link"
                          href="https://mdbootstrap.com/docs/standard/"
                          target="_blank"
                          >Download MDB UI KIT</a
                        >
                      </li>
                    </ul>

                    <ul class="navbar-nav flex-row">
                      <!-- Icons -->
                      <li class="nav-item">
                        <a
                          class="nav-link pe-2"
                          href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"
                          rel="nofollow"
                          target="_blank"
                        >
                          <i class="fab fa-youtube"></i>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a
                          class="nav-link px-2"
                          href="https://www.facebook.com/mdbootstrap"
                          rel="nofollow"
                          target="_blank"
                        >
                          <i class="fab fa-facebook-f"></i>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a
                          class="nav-link px-2"
                          href="https://twitter.com/MDBootstrap"
                          rel="nofollow"
                          target="_blank"
                        >
                          <i class="fab fa-twitter"></i>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a
                          class="nav-link ps-2"
                          href="https://github.com/mdbootstrap/mdb-ui-kit"
                          rel="nofollow"
                          target="_blank"
                        >
                          <i class="fab fa-github"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </nav>
              <!-- Animated navbar -->

              <!-- Background image -->
              <div
                id="intro"
                class="bg-image"
                style="
                  background-image: url(https://mdbootstrap.com/img/new/fluid/city/113.webp);
                  height: 100vh;
                "
              >
                <div class="mask text-white" style="background-color: rgba(0, 0, 0, 0.8);">
                  <div class="container d-flex align-items-center text-center h-100">
                    <div>
                      <h1 class="mb-5">This is title</h1>
                      <p>
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae
                        laboriosam numquam expedita ullam saepe ipsam, deserunt provident corporis,
                        sit non accusamus maxime, magni nulla quasi iste ipsa architecto? Autem!
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Background image -->
            </header>
            <!--Main Navigation-->

If you want to customize the colors in the animated navbar you need to overwrite the following styles.

Note: These are the default settings. If you don't want to change anything then you don't need to add or modify the following code.

        
            
          /* Color of the links BEFORE scroll */
          .navbar-scroll .nav-link,
          .navbar-scroll .navbar-toggler-icon {
            color: #fff;
          }

          /* Color of the links AFTER scroll */
          .navbar-scrolled .nav-link,
          .navbar-scrolled .navbar-toggler-icon {
            color: #4f4f4f;
          }

          /* Color of the navbar AFTER scroll */
          .navbar-scrolled {
            background-color: #fff;
          }

          /* An optional height of the navbar AFTER scroll */
          .navbar.navbar-scroll.navbar-scrolled {
            padding-top: 5px;
            padding-bottom: 5px;
          }