How to Keep a Nav Bar at the Top of the Page

how do I keep a nav bar at the top of the page?

the solution is easy, keep your css while adding px

nav
{
   position: fixed;
   top: 0px;
}

navigation bar all the way to the top

Just Add The Position And Top Property In CSS

  #randomdiv{
    position:absolute;
    top:0px;
  }

How can I keep this navigation bar at the top when I scroll the page?

You can apply position: fixed to the navigation div, add background-color: #fff, and then add some padding to the header at the top of the page so that the navigation element does not overlap the page content.

How do I get my nav bar to stick to the top of the screen when you scroll?

A lot of things to fix your code that not necessarily has something to do with your code.

Mandatory:

1. remove -webkit-sticky; as it is useless. Firefox supports sticky be default as every other browser with exeption of IE. The use of -webkit- is outdated since many years.
2. they sticky should be applied to the navbar itself not just the list.
3. The Navbar needs to be excldued from the header. If it is a child of the header, it will be forced to stay within the child and therefor pulled out of the screen.

Optional:

using float for styling purpose is not only outdated but never was a thing. It was mis-used by many out of its actual purpose. It should only be used for floating images within a paragraph. For that use, delcare the list simply as inline-block. Then it can be aligned with text-align.

body {
  background-color: rgb(43, 23, 23);
  padding: 0;
  margin: 0;
  height: 1000px;
}

.active {
  background-color: rgb(31, 31, 31);
}

#headImage {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: 50% 50%;
}

#navBar {
  position: sticky;
  top: 0;
}

#navBar ul {
  list-style-type: none;
  overflow: hidden;
  background-color: rgb(20, 20, 20);
  padding: 0;
  margin: 0;
}

#navBar li {
  display: inline-block;
}

#navBar a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navBar a:hover {
  background-color: rgb(31, 31, 31);
}

<header>
  <img src="Assets/images/Header1.jpg" id="headImage">
</header>
<nav id="navBar">
  <ul>
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="weapons.html">Weapons</a></li>
    <li><a hred="maps.html">Maps</a></li>
    <li><a href="modes.html">Modes</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<footer>
</footer>

How to Keep Fixed Nav Bar In Front and Not Behind Page Elements

You need to use z-index to always bring it on to top
Use CSS

table{
 Width: 100%;
 height: 50px;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 100;
}

Keeping Navigation Header at Top When Page Pulled Up on Mobile

setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?

How do I make the nav bar always at the top?

If you're using foundations, you can use:

<nav class="top-bar fixed"></nav>

---

Related Topics