Transparent Bootstrap navbar - css

Question

I am working on a website and I want the navigation (only home the homepage) to be transparent and the image to cover the full screen. This is what I have so far:
The nav-bar is styled in this way because that's how it is on the other pages.
This is my HTML:
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-trans" id="mainNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<img class="logo" src="app/assets/images/bunklogo.png" alt="bunk">
Bunk.
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#tenant">TENANT</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="landlord.html">LANDLORD</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#bunkfaqs">BUNK FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#blog">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#team">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#login">LOG IN</a>
</li>
<li class="nav-iten">
<button class="btn signup"> SIGN UP</button>
</li>
</ul>
</div>
</nav>
</div>
and my css:
#mainNav {
background-image: linear-gradient(90deg, #439EE0 0%, #26ADE6 100%);
/*margin-top: -0.5%;*/
padding-top: 1rem;
padding-bottom: 3rem;
margin-bottom: 0;
}
.navbar-toggler.navbar-toggler-right {
color:white;
border: 1px solid white;
font-size: 1.2rem;
padding: 1rem;
}
.navbar-light .navbar-nav .nav-link {
font-size: 1.2rem;
color: #ffffff;
letter-spacing: 0.8px;
text-align: center;
padding-right: 5rem;
}
.navbar-brand.js-scroll-trigger {
color: #ffffff;
font-size: 2rem;
}
Any suggestions?

Answer 1

There's no need for any custom css hacks here.
To make your Bootstrap navbar transparent, all you need is to remove the class bg-light.
That's it!
The bg in bg-light stands for "background". So, if you leave out the class for background color, you automatically have a transparent navbar.

Answer 2

Ok, first of all you need to separate the home page from the other pages. To do this just insert an ID on your body section like #home.
So, in this scenario you will add the following:
body#home #mainNav {
background:transparent;
background-image:none;
position:absolute;
width:100%;
left:0px;
right:0px;
top:0px;
}
Don't forget that your Slider (or w/e you have after #mainNav), maybe will need some padding-top equals to the #mainNav height, for example (in case that your #mainNav height is 50px):
.slider {
padding-top:50px;
}

Answer 3

You can give an extra class to your navbar on your index.html only. (or your homepage html file name.)
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-trans navbar--home" id="mainNav">
Then you can select this class like :
#mainNav.navbar--home{
background:transparent;
}

Answer 4

Use home page body class, for ex.: ".home / .home-index / .index-page" as a parent of ".nav.fixed-top" container.
CSS::
.home .nav.fixed-top{
background:rgba(0, 0, 0, 0) none repeat scroll 0 0;
}