How do I make navbar fixed/sticky? position: fixed, sticky not working-CodePudding

How do I make navbar fixed/sticky? position: fixed, sticky not working.

Html

<body>
    <header>
        <div >
            <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  aria-hidden="true"></i>
            </div>
            <div>
                <p id="login">Login/Register</p>
            </div>
        </div>
    </header>

css

.header{
    position:sticky;
    top: 0;
    align-items: center;
}

CodePudding user response：

.header{
    position:fixed;
    top: 0;
    width:"100%";
    min-height:"8vh";
}

CodePudding user response：

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;
}

CodePudding user response：

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 >
            <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  aria-hidden="true"></i>
            </div>
            <div>
                <p id="login">Login/Register</p>
            </div>
        </div>
    </header>
</body>