Hero section under transparent navigational menu - html

Question

I've been trying to search for a solution but I couldn't find any yet.
I would like to make a transparent navigational menu bar with a hero section just like in this website here https://paragonmigration.com/
I'm having trouble with the image part where the navigation menu overlapses it.
This is what I have done so far with html:
body {
padding: 0;
margin: 0;
width: 100%; /* fixes white space on the right side */
overflow-x: hidden; /* fixes white space on the right side */
}
h4 {
font-size: 18px;
}
/*#top-header {
height: 39px;
background-color: #36404a;
color: #fff;
line-height: 39px;
padding-left: 50px;
margin: 0;
padding: 0;
}*/
.top-header {
display: flex;
background-color: #36404a;
color: #fff;
height: 39px;
align-items: center;
}
.top-header > div {
margin: 0 15px;
}
.top-header > div > i {
margin-right: 5px;
}
.top-header-address {
padding-left: 50px;
}
.top-header-email {
flex: 2;
}
.top-header-facebook {
flex-basis: 2em;
}
.top-header-facebook a {
color: #fff;
}
.top-header-book {
display: flex; /* in order to center the elements inside */
background-color: #fa0505;
flex-basis: 251px;
height: 100%; /* in order to entirely stretch and fill to the parent element's* height */
align-items: center;
justify-content: center;
}
/* remove the right margin for the last div */
.top-header div:nth-last-child(1) {
margin: 0;
}
.top-header-book a {
text-decoration: none;
color: #fff;
margin-right: 5px;
font-weight: bold;
}
/*
#site-header-menu {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
*/
.nav-menu {
display: flex;
height: 80px;
background-color: rgba(255, 255, 255, 0.6);
align-items: center;
}
/* add sticky functionality to navigation menu */
.sticky {
position: fixed;
top: 0;
width: 100%;
background-color: #36404a;
color: #fff;
z-index: 2;
}
.sticky.nav-menu ul li a {
color: #fff;
}
.logo img {
height: 75px;
width: 156px;
}
.nav-menu ul {
display: flex;
flex: 4;
/*height: 100%;*/
justify-content: center;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-menu ul > li {
font-size: 14px;
margin: 0 10px;
}
.nav-menu ul li a {
text-decoration: none;
color: #000;
}
.have-questions {
display: flex;
align-items: center;
justify-items: center;
text-align: center;
}
.message-icon i {
color: red;
}
.questions {
font-size: 18px;
margin: 10px;
line-height: 1.5em;
}
#slider {
position: relative;
top: -150px;
padding: 0;
background: url('../assets/images/slide.jpg') no-repeat center center fixed;
/* background-size: cover;*/
height: 750px;
color: #fff;
z-index: -1;
}
<div id="site-header-menu">
<div class="container top-header">
<div class="top-header-address">
<i class="fas fa-map-marker-alt"></i>
Address: 2903, Single Business Tower, Dubai
</div>
<div class="top-header-email">
<i class="far fa-envelope"></i>
Email Address: info#paragonmigration.com
</div>
<div class="top-header-facebook">
<i class="fab fa-facebook-f"></i>
</div>
<div class="top-header-book">
Book A Consultation
<i class="fas fa-long-arrow-alt-right"></i>
</div>
</div><!-- #site-header-menu -->
<div class="nav-menu" id="nav-menu">
<div class="logo"><img src="assets/images/logo.png" alt="logo"></div>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>CANADA</li>
<li>POLAND</li>
<li>AUSTRALIA</li>
<li>NEW ZEALAND</li>
<li>UK</li>
<li>CONTACT US</li>
</ul>
<div class="have-questions">
<div class="message-icon"><i class="far fa-comment-alt fa-3x"></i></div>
<div class="questions">
<div>Have any Questions?</div>
<div>04 303 3000</div>
</div>
</div>
</div><!-- .nav-menu -->
</div><!-- site-header-menu -->
<div id="slider">
<p id="welcome">WELCOME TO PARAGON</p>
<p id="migration">Migration and Visa</p>
<p id="consultants"><em>Consultants</em></p>
LEARN MORE >
</div><!-- #slider -->