I’ve been writing some code for my project and I’m stuck at a point where I can’t fix(stick) my progress bar div at the top of the page when it is scrolled down and navbar gets hidden. Can someone get to this and help me?
The HTML for the code is :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile setup</title>
<link rel="stylesheet" href="profile-setup.css">
</head>
<body>
<div id="profile-main">
<div id="navbar">
<div id="logo">
<a href="#"><h3>Autumn.</h3></a>
</div>
<div id="text-nav">
<h3>Setup your Profile</h3>
</div>
<div id="buttons">
<button><span>Sign up / Log in</span></button>
</div>
</div>
<div id="progress-bar">
bar
</div>
<div id="main-content">
main content
</div>
</div>
<script src="profile-setup.js"></script>
</body>
</html>
and the CSS :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
}
::selection{
background: chocolate;
}
#profile-main{
background-color: #E5CBC3;
height: 1500px;
width: 100%;
display: flex;
align-items: center;
/* justify-content: center; */
flex-direction: column;
}
#navbar {
display: flex;
padding: 20px;
width: 80vw;
align-items: center;
/* height: 4px; */
/* background-color: red; */
justify-content: space-between;
}
#navbar #logo a{
text-decoration: none;
}
#navbar #logo a h3{
font-family: 'Courier New', Courier, monospace;
font-size: 25px;
color: black;
transition: all ease 0.9s;
}
#navbar #logo a h3:hover{
text-decoration: underline;
/* line-height: 1.5rem; */
}
#navbar #text-nav h3{
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
font-size: 20px;
}
#navbar #buttons button{
background-color: black;
color: white;
padding: 10px 25px;
border-radius: 4px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
border: none;
position: relative;
/* background-color: #04AA6D; */
/* border: none; */
/* font-size: 28px; */
color: #FFFFFF;
/* padding: 20px; */
/* width: 200px; */
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
/* animation */
#navbar #buttons button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
#navbar #buttons button span:after {
content: '0bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
#navbar #buttons button:hover span {
padding-right: 25px;
}
#navbar #buttons button:hover span:after {
opacity: 1;
right: 0;
}
#progress-bar{
margin-top: 40px;
width: 80%;
background-color: rgb(104, 171, 230);
height: 200px;
}
#main-content{
display: flex;
background-color: rgb(252, 146, 146);
width: 80%;
height: 100%;
display: flex;
flex-direction: column;
}
I tried giving it a fixed position , trial and error with z-index and tried other things too, like with the position attribute, but nothing helps!!