I'm interested in creating a landing page design with a large jumbotron at the top and a transparent navbar overlaid on it, similar to the layout on this website: https://stripe.com/en-gb-dk. The jumbotron will simply have a colored background, without any background image. I've experimented with using 'fixed-top', which gives me the desired effect of the navbar position; however, I don't want the navbar to stay fixed at the top as the user scrolls down – I just want the transparent navbar to sit on top of the jumbotron. Does anyone know how I can achieve this using Bootstrap? Thank you!
Here is an example of my code (I am using Bootstrap with React)
Navbar:
<nav className={`navbar navbar-expand-md navbar-light bg-transparent`}>
<div className="container-fluid">
// Navbar content goes here
</div>
// Styling specific to the navbar
</nav>
Jumbotron:
<section>
<div className="main-jumbotron">
// Jumbotron content goes here
</div>
// Styling specific to the jumbotron
<section>
View what my current design looks like
My goal is to make the navbar transparent and adjust the layout so that there is no white space at the top of the page between the navbar and jumbotron.
Note: I have included both the code snippet and a screenshot for reference.