I am currently utilizing bootstrap to design my website. I have a sticky nav-bar and a button, both of which should ideally stack one on top of the other in the following manner:
- ------------------------------Nav-bar------------------------------
- ------------------------------Button------------------------------
However, the issue I am facing is that they end up overlapping each other in a strange way.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-dark sticky-top bg-dark navbar-expand-lg navbar-light bg-light d-flex justify-content-between">
<a class="navbar-brand" href="#">
<img id="logo" src="../Images/ZipUpSVG.svg" alt="Creatives-Logo">
</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="https://www.fiverr.com/cre4tivesstudi0?up_rollout=true">Hire Me</a></li>
<li class="nav-item"><a class="nav-link" href="../ShopPage.html">Shop</a></li>
<li class="nav-item"><a class="nav-link" href="../SocialMediaPage.html">Social Media</a></li>
<li class="nav-item"><button class="btn snipcart-customer-signin nav-link"><i class="fas fa-user"></i> Sign in</button></li>
<li class="nav-item"><button class="btn snipcart-checkout nav-link"><i class="fas fa-shopping-cart"></i>
<span class="snipcart-total-price">$0.00</span>
</button></li>
</ul>
<div class="burger">
<div class="burger-container">
<div class="burger-text">
<h2>MENU</h2>
</div>
</div>
</div>
</nav>
<div class="row sticky-top">
<div class="col-12 text-center">
<button class="btn btn-outline-danger px-5 py-4">Download Now</button>
</div>
</div>#logo {
width: 138px;
}
.bg-dark{
background-color: #CC2B57 !important;
}
.burger {
padding-top: 0.5rem;
padding-right: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
}
.burger-container {
padding-top: 0.5rem;
padding-right: 0.5rem;
padding-bottom: 0.2rem;
padding-left: 0.5rem;
background-color: hsla(34,95%,57%,0.78);
}
.burger-text {
color: #FFFFFF;
font-size: 2rem;
background-color: #FED767;
padding-right: 0.5rem;
padding-left: 0.5px;
text-align: center;
}
.burger-text {
color: #FFFFFF;
font-size: 2rem;
background-color: #FED767;
padding-right: 0.5rem;
padding-left: 0.5px;
text-align: center;
}
.contact {
flex-basis: 30rem;
}
.nav-links {
font-size: 3rem;
flex-basis: 30rem;
}
.nav-bar {
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: space-between;
align-items: center;
opacity: 1;
clip-path: circle(50px at 100% -10%);
-webkit-clip-path: circle(50px at 100% -10%);
display: flex;
z-index: 1000;
background-color: #2D2871;
position: absolute;
font-family: 'Corben', cursive;
background-blend-mode: overlay;
padding-left: 15rem;
padding-right: 15rem;
}