HTML- Is there anything I can do to make my sticky navbar to work?-CodePudding

I've been trying to make a sticky navbar but its not working i've tried z-index: 999 but it does'nt work.

* {
  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 >
  <ul >
    <div ><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 >
  <div >
    <div >
      <p >Aadyant Chaturvedi</p>
      <p >Unity Game Developer</p>
      <div >
        <button >Github</button>

      </div>
    </div>

    <div >
      <img src="img/email_icon.png" alt="gmail" width="100%">
    </div>
  </div>
</section>

CodePudding user response：

* {
  margin: 0;
  padding: 0;
}

html,
body {
  max-width: 100%;
  max-height: 100%;
  /* overflow-x: hidden;  /*comment this line */
}

.site {
  overflow: hidden;
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: center; /* should be justify-content: 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%;
}

    <nav >
        <ul >
            <div ><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 >
        <div >
            <div >
                <p >Aadyant Chaturvedi</p>
                <p >Unity Game Developer</p>
                <div >
                    <button >Github</button>

                </div>
            </div>

            <div >
                <img src="img/email_icon.png" alt="gmail" width="100%">
            </div>
        </div>
    </section>
      <section >
        <div >
            <div >
                <p >Aadyant Chaturvedi</p>
                <p >Unity Game Developer</p>
                <div >
                    <button >Github</button>

                </div>
            </div>

            <div >
                <img src="img/email_icon.png" alt="gmail" width="100%">
            </div>
        </div>
    </section>

Comment overflow-x:hidden in body

CodePudding user response：

In your navbar class, use this

.navbar{
display: flex;
align-items: center;
justify-items: center;
width: 100vw;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
z-index: 999;
}