how to make progress bar not overflowing in navbar? - html

Question

the title sounds weird, idk how to explain it. so i'm building a skill progression bar section on my website. i'm using a sticky navbar so that it'll be easier to click the section. when i'm scrolling down, the progress bar kinda overflowing to the navbar(?) anyone know how to fix this? this is not my code and i'm just following so i don't really understand how this works *edit this is not the entire code cz ain't no way i'm posting all of it.
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
/*STICKY NAVBAR*/
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
/*NO UNDERLINE LINK*/
a,
a:hover,
a:visited,
a:focus {
text-decoration: none;
}
/*navbar*/
nav {
background-color: black;
height: 80px;
width: 100%;
}
label.logo {
color: white;
font-size: 35px;
line-height: 80px;
padding: 0px 100px;
font-family: 'DM Serif Display', serif;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
text-transform: uppercase;
font-family: 'DM Serif Display', serif;
}
a.onactive,
a:hover {
background-color: white;
color: #444444;
transition: .5s;
padding: 5px;
border-radius: 3px;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
}
#media (max-width: 952px) {
label.logo {
font-size: 30px;
padding-left: 50px;
}
nav ul li {
font-size: 16px;
}
}
#media (max-width: 858px) {
ul {
position: fixed;
width: 100%;
height: 100vh;
background-color: #444444;
bottom: -100%;
top: 80px;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
text-align: center;
}
nav ul li a {
font-size: 20px;
}
a.onactive,
a:hover {
background: none;
}
/*NAVBAR ENDS*/
.details {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.bar {
position: relative;
border: 2px solid #0d96e0;
border-radius: 20px;
}
.bar div {
position: relative;
width: 0;
height: 9px;
border-radius: 10px;
background-color: #0d96e0;
}
.skills:not(:last-child) {
margin-bottom: 30px;
}
#html-bar {
animation: html-fill 2s forwards;
}
#keyframes html-fill {
100% {
width: 90%;
}
}
#css-bar {
animation: css-fill 2s forwards;
}
#keyframes css-fill {
100% {
width: 75%;
}
}
#javascript-bar {
animation: js-fill 2s forwards;
}
#keyframes js-fill {
100% {
width: 72%;
}
}
#jQuery-bar {
animation: jQuery-fill 2s forwards;
}
#keyframes jQuery-fill {
100% {
width: 68%;
}
}
span {
color: white;
font-family: 'Poppins', sans-serif;
}
<nav class="sticky">
<label class="logo" id="nav">Shira</label>
<ul>
<li>Home</li>
<li>About</li>
<li>Career</li>
</ul>
</nav>
<section id="section1">
<div class="skills">
<div class="details">
<span>HTML</span>
<span>90%</span>
</div>
<div class="bar">
<div id="html-bar"></div>
</div>
</div>
<div class="skills">
<div class="details">
<span>CSS</span>
<span>75%</span>
</div>
<div class="bar">
<div id="css-bar"></div>
</div>
</div>
<div class="skills">
<div class="details">
<span>jQuery</span>
<span>68%</span>
</div>
<div class="bar">
<div id="jQuery-bar"></div>
</div>
</div>
<div class="skills">
<div class="details">
<span>Javascript</span>
<span>72%</span>
</div>
<div class="bar">
<div id="javascript-bar"></div>
</div>
</div>
</section>

Answer 1

One way would be to put the navbar on the top layer.
I recommend you to take a look at CSS z-index, which you could use to accomplish this.
Basically boils down to; select your navbar and give it a z-index value higher than the other element(s).
eg;
.sticky {
z-index: 999;
}