1

I'm new to HTML and CSS and I need to implement a Sticky navbar but when I transform it into position fixed it messes up my code and it does not show the animated background I put in how do I fix it ?

This is my CSS

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(90deg, #111e6c, teal, #135589);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*********************Nav bar animation and design*************************/
#navbar {
  background-color: rgba(0, 0, 0, 0.376);
  width: 100vw;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: fixed;
}

.navbar-index{
  width:100%;
}

.nav-link {
  font-family: fantasy;
  color: white;
  font-size: 25px;
  height: 42px;
  border: 2px solid black;
  text-align: center;
  flex-grow: 1;
}

This is the HTML

  <body>
    <div class="container">
      <nav class="navbar-index" id="navbar">
        <a href="/Index.html" class="nav-link link-1">Home</a>
        <a href="/About.html" class="nav-link link-1">About</a>
        <a href="/Contact.html" class="nav-link link-1">Contact</a>
      </nav>
    </div>
  </body>
</html>
tal michel
  • 49
  • 4

1 Answers1

1

first thing, when you use position: fixed, add top and left to this, second: you can use position: sticky, third: when use position:fixed, because you have not any other content for body, you can add min-height: 100vh, vh mean height of client monitor

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(90deg, #111e6c, teal, #135589);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  min-height: 100vh;/*this is it*/
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*********************Nav bar animation and design*************************/
#navbar {
  background-color: rgba(0, 0, 0, 0.376);
  width: 100vw;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: fixed;
  /*top: 0;*/
}

.navbar-index{
  width:100%;
}

.nav-link {
  font-family: fantasy;
  color: white;
  font-size: 25px;
  height: 42px;
  border: 2px solid black;
  text-align: center;
  flex-grow: 1;
}
  <body>
    <div class="container">
      <nav class="navbar-index" id="navbar">
        <a href="/Index.html" class="nav-link link-1">Home</a>
        <a href="/About.html" class="nav-link link-1">About</a>
        <a href="/Contact.html" class="nav-link link-1">Contact</a>
      </nav>
    </div>
  </body>
Amirhoseinh73
  • 409
  • 5
  • 14
  • Thanks you very much for your help, could I also ask why do i need to add `top` and `left` if im using `position: fixed;` ? – tal michel Jan 03 '21 at 07:04
  • @talmichel your welcome :) thanks for accepting. `position: fixed` or `absolute` can be every where of page, can be top, left top, right bottom and ... , In summary they can be four corner of page and everywhere you want, because of that better use top and left or bottom and right or etc, just use two point for axis Y and X to not messed up your contents. sorryy for my grammar :D – Amirhoseinh73 Jan 03 '21 at 07:26