I'm having trouble creating a sticky navbar. I've attempted to use z-index: 999 but it's not behaving as expected.
* {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
align-items: center;
justify-items: center;
position: sticky;
top: 0;
cursor: pointer;
z-index: 999;
}
.nav-list {
background-color: #222c36;
width: 100%;
height: 50%;
display: flex;
align-items: center;
}
.nav-list li {
list-style: none;
padding: 26px 20px;
}
.nav-list li a {
text-decoration: none;
size: 42;
color: #ffff;
}
.nav-list li a:hover {
color: #3b92d1;
}
.logo img {
width: 20%;
border: 3px solid white;
border-radius: 50px;
}
.logo {
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.background {
background: rgba(0, 0, 0, 0.7) url('../img/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
background-blend-mode: darken;
}
.firstSection {
height: 100vh;
}
.firstHalf {
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
}
.secondHalf {
width: 30%;
}
.secondHalf img {
display: block;
margin: auto;
}
.box-main {
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: 'Roboto Condensed', sans-serif;
max-width: 50%;
margin: auto;
height: 90%;
}
html,
body {
max-width: 100%;
max-height: 100%;
overflow-x: hidden;
}
.site {
overflow: hidden;
}<nav class="navbar">
<ul class="nav-list">
<div class="logo"><img src="img/logo.jpg" alt="logo"></div>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</nav>
<section class="background firstSection">
<div class="box-main">
<div class="firstHalf">
<p class="text-big">Aadyant Chaturvedi</p>
<p class="text-small">Unity Game Developer</p>
<div class="buttons">
<button class="btn">Github</button>
</div>
</div>
<div class="secondHalf">
<img src="img/email_icon.png" alt="gmail" width="100%">
</div>
</div>
</section>