.header{
position:fixed;
top: 0;
width:"100%";
min-height:"8vh";
}
Solution 1 :
Solution 2 :
Before you check for other issues, it might be a good idea to ensure that you’re using a browser that supports position: sticky.
I am suggesting you top as extra parameter because
a sticky element requires a threshold to be specified, which means that you must set a value other than "auto" for at least one of the following properties:
top
or
right
or
bottom
or
left
For more details visit Here
.navbar {
position : sticky;
top : 0;
background-color: #32839c;
}
Solution 3 :
Try this code! change flex-direction: row and remove child padding if you want a horizontal item menu. Thanks 🙂
*,*::before,*::after{
box-sizing: border-box;
}
body{
height: 100vh;
}
.header {
background: grey;
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 0;
width: 100%;
height: auto;
overflow-x: hidden;
}
.header>div:first-child {
padding-top: 20px;
}
.header>div:last-child {
padding-bottom: 20px;
}<body>
<header>
<div class="header">
<div>
<img id="fc-logo" src="https://pwa-cdn.freecharge.in/pwa-static/pwa/images/header/fc-logo.svg" alt="freecharge logo" height="70" width="200">
</div>
<div>
<i class="login-icon fa fa-user-circle fa-3x" aria-hidden="true"></i>
</div>
<div>
<p id="login">Login/Register</p>
</div>
</div>
</header>
</body>Problem :
How do I make navbar fixed/sticky? position: fixed, sticky not working.
Html
<body>
<header>
<div class="header">
<div>
<img id="fc-logo" src="https://pwa-cdn.freecharge.in/pwa-static/pwa/images/header/fc-logo.svg" alt="freecharge logo" height="70" width="200">
</div>
<div>
<i class="login-icon fa fa-user-circle fa-3x" aria-hidden="true"></i>
</div>
<div>
<p id="login">Login/Register</p>
</div>
</div>
</header>
css
.header{
position:sticky;
top: 0;
align-items: center;
}
Comments
Comment posted by developer.mozilla.org/en-US/docs/Web/CSS/position#sticky
Welcome to SO; there already are some suggested answers. Here’s the documentation of postion:sticky:
Comment posted by Explaining entirely code-based answers
While this might be technically correct, it doesn’t explain why it solves the problem or should be the selected answer. We should educate along with helping solve the problem. See