Put transparent navbar on top of jumbotron - Bootstrap - css

Question

I'm trying to make a landing page with a big jumbotron at the top and a transparent navbar placed on top of it, like this: https://stripe.com/en-gb-dk. The jumbotron just has a coloured background (i.e. no background image). I have tried fixed-top, which achieves the desired effect; however, I'm not interested in the navbar being fixed to the top (i.e. follow the page on scroll) - I'm just interested in the transparent navbar being on top of the jumbotron. Does anyone know how I can achieve this using bootstrap? Thanks!
Below is my code (I use Bootstrap in conjunction with React)
Navbar:
<nav className={`navbar navbar-expand-md navbar-light bg-transparent`}>
<div className="container-fluid">
<a className="navbar-brand">
<img src="/images/logo.png" alt="" className="img-fluid" />
</a>
<button
onClick={() => setShowMenu(!showMenu)}
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className={`collapse navbar-collapse ${showMenu ? "show" : ""}`}>
<div className="navbar-nav mx-auto">
<li className="nav-item active">
<a className="nav-link" href="#">
Link 1
</a>
</li>
<li className="nav-item active">
<a className="nav-link" href="#">
Link 2
</a>
</li>
<li className="nav-item active">
<a className="nav-link" href="#">
Link 3
</a>
</li>
</div>
<div className="nav navbar-nav nav-right">
<li className="nav-item active">
<a className="nav-link" href="#">
Link 4
</a>
</li>
</div>
</div>
</div>
<style jsx>
{`
.navbar .navbar-collapse {
text-align: center;
}
#media (min-width: 992px) {
.nav-right {
float: right;
}
}
`}
</style>
</nav>
Jumbotron:
<section>
<div className="main-jumbotron">
<h1>Let us help you find your next expert</h1>
<h4>
At beautykonect, we have the best experts ready to help you
</h4>
<div className="text-center mt-5">
<button className="btn btn-primary btn-lg outline">Get started</button>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<polygon fill="white" points="0,100 100,0 100,100" />
</svg>
</div>
<style jsx>
{`
svg {
position: absolute;
bottom: 0;
width: 100%;
height: 10vw;
}
.main-jumbotron {
position: relative;
height: 90vh;
min-height: 300px;
background: rgb(255, 216, 223);
background: linear-gradient(
90deg,
rgba(255, 216, 223, 1) 0%,
rgba(252, 189, 201, 1) 53%,
rgba(255, 134, 157, 1) 100%
);
}
.main-jumbotron h1 {
padding-top: 125px;
text-align: center;
color: white;
font-weight: 700;
}
.main-jumbotron h4 {
color: white;
margin-top: 25px;
font-weight: 600;
text-align: center;
}
.btn.outline {
background: none;
padding: 12px 22px;
}
.btn-primary.outline {
border: 2px solid #fff;
color: #fff;
}
.btn-primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:active,
.btn-primary.outline.active,
.open > .dropdown-toggle.btn-primary {
color: rgba(252, 189, 201, 1);
border-color: #fff;
background-color: #fff;
}
.btn-primary.outline:active,
.btn-primary.outline.active {
border-color: #007299;
color: #007299;
box-shadow: none;
}
`}
</style>
<section>
This is what it looks like now
What I want to do then is to make the navbar transparent and push the banner/jumbotron up, such that there is no white section at the top of the page
Edit: added code and photo

Answer 1

Bootstrap provides a utility class position-absolute which will give the desired result but it does not have classes to handle specific positioning properties such as top.
This solution follows the same approach as the example, apply this new style rule in the inline style for the navbar:
.navbar {
position: absolute; // could use 'position-absolute' on navbar instead
top: 0;
left: 0;
width: 100%; // could also use class 'w-100' on navbar instead
}