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.
<!-- 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 --><!-- 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 --><!-- 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.
<!--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;
}