I am building a website for a crypto coin meme, the problem is that my navbar doesn’t overlap some of the links and cards I created that have ‘opacity’ argument in CSS. I want to make my navbar overlap everything when I scroll down.
Example photo https://imgur.com/a/Ipd1lOT
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Roboto&family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/navbar.css">
<link rel="stylesheet" href="CSS/buttons.css">
<link rel="stylesheet" href="CSS/details.css">
<link rel="stylesheet" href="CSS/container.css">
<link rel="stylesheet" href="CSS/container2.css">
<link rel="stylesheet" href="CSS/container3.css">
<link rel="stylesheet" href="CSS/footer.css">
<link rel="icon" type="image/gif/png" href="assets/shitcoin_logo.png">
<title>Shitcoin - Worst crypto currency</title>
</head>
<body>
<header>
<div class="Nav-Container">
<a href=""><img class="logo" src="assets/shitcoin_logo.png" alt=""></a>
<nav class="navbar">
<ul>
<li class="navbar-links"><a href="">Home</a></li>
<li class="navbar-links"><a href="">About us</a></li>
<li class="navbar-links"><a href="">Stake</a></li>
<li class="coinprice"><img src="assets/shitcoin_logo.png" alt=""><p>: $0.00213</p></li>
<li><a href="#" class="walltet">Connect Wallet</a></li>
</ul>
</nav>
</div>
</header>
<div class="container1">
<div class="aboutcointext">
<h1>Welcome to the <span>THUNDER</span> project homepage</h1>
<h2>Worst cypto coin available on the market!</h2>
<a href="" class="buycoin">Buy Thunder (THD)</a>
</div>
<div class="aboutcoinlinks">
<a href="" class="fb">Facebook</a>
<a href="" class="insta">Instagram</a>
<a href="" class="twitter">Twitter</a>
</div>
</div>
<div class="details">Why you should <span>NOT</span> invest in us?</div>
<div class="container2">
<div class="reason1">
<img src="assets/man_on_toilet.png" alt="">
<h3>Reason 1:</h3>
<p>We have very little to no experience in the crypto world</p>
</div>
<div class="reason2">
<img src="assets/just_toilet.png" alt="">
<h3>Reason 2:</h3>
<p>This coin is made as a joke and should not be taken seriously</p>
</div>
<div class="reason3">
<img src="assets/money-pngrepo-com.png" alt="">
<h3>Reason 3:</h3>
<p>Your capital is at risk and we are not responsible for your money</p>
</div>
</div>
<div class="mining_details">You can mine <span>Shitcoin</span> but we don't guarantee you'll make money</div>
<div class="container3">
<div class="">
<p>Compact tool made by us to help you mine easier:</p>
<a href="" class="minerbutton">Download THD miner</a>
</div>
</div>
<footer>
<div class="footer-container">
<h2>Contact Us</h2>
<ul>
<li><a href="">Support</a></li>
<li><a href="">Email</a></li>
<li><a href="">About Us</a></li>
</ul>
</div>
<div class="footer-container">
<h2>FAQ</h2>
<ul>
<li><a href="">How to buy?</a></li>
<li><a href="">How to sell?</a></li>
<li><a href="">How to mine THD?</a></li>
<li><a href="">More...</a></li>
</ul>
</div>
</footer>
</body>
</html>
CSS code for navbar:
body{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background: linear-gradient(0deg, rgba(47,48,48,1) 0%, rgba(73,80,87,1) 100%);
/* background-color: #495057; */
color: white;
}
header{
position: sticky;
top: 0;
background-color: #ADB5BD;
}
header::after{
content: '';
display: table;
clear:both;
}
.Nav-Container{
width: 80%;
margin: 0 auto;
}
.logo{
width: 5rem;
float: left;
}
.navbar{
float: right;
/* text-align: center; */
}
.navbar ul{
list-style: none;
margin:0;
padding:0;
}
.navbar li{
display: inline-block;
margin-left: 70px;
padding-top: 31px;
position: relative;
}
.navbar a{
color: #495057;
text-decoration: none;
text-transform: uppercase;
}
.navbar a:hover{
color: white;
}
.navbar-links::before{
content:'';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 0%;
transition: all ease 250ms;
}
.navbar-links:hover::before{
width: 100%;
}
.navbar img{
float:left;
width: 2rem;
position: relative;
bottom: 7px;
}
.navbar p{
display: inline;
}
.wallet{
display: inline;
padding: 5px 5px;
border: 1px solid #495057;
border-radius: 7px;
}
CSS code for social media links:
.aboutcoinlinks{
display:flex;
flex-direction: row;
flex-wrap: wrap;
}
.aboutcoinlinks a{
align-self: flex-start;
margin-left:10px;
padding: 20px 15px;
text-decoration: none;
color: white;
text-align: center;
background-color: black;
opacity:70%;
transition: all ease 250ms;
}
.aboutcoinlinks a:hover{
opacity: 100%;
}
.aboutcoinlinks .fb{
padding: 20px 15px;
background-color: #4267B2;
border: 1px solid #4267B2;
border-radius: 10px;
}
.aboutcoinlinks .insta{
padding: 20px 15px;
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
border: 1px solid linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);;
border-radius: 10px;
}
.aboutcoinlinks .twitter{
padding: 20px 15px;
background-color: #1DA1F2;
border: 1px solid #1DA1F2;
border-radius: 10px;
}