This layout features a navigation bar:
<header id="navigation-bar" class="nav-header">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="images/logo.svg" alt="logo-icon">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">How we work <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item item2 active">
<a class="nav-link" href="#">Blog<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item item2 active">
<a class="nav-link" href="#">Account <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link nav-btn-link" href="#"><button class="nav-btn btn btn-outline-dark">View Plans</button><span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</header>
The image bg-img1 is intended to be positioned behind the navbar:
<section id="Heading">
<img class="bg-img1" src="images/bg-pattern-intro-right-desktop.svg" alt="bg-pattern-left">
<div class="container-1">
<div class="heading-text">
Attempts have been made to position the header around the navbar and adjust the z-index, but it doesn't seem to achieve the desired effect.
.nav-header {
position: relative;
padding: 1%;
z-index: 10000;
}
This is how the image has been styled for positioning:
.bg-img1 {
position: absolute;
right: 0;
width: 40%;
top: 3%;
z-index: 2;
}