How to have a fixed navigation bar that doesn't change size when you scroll down?

Question

My navigation bar spans the width of the page but when I write object: fixed;, the navigation bar shrinks and goes over the text. I would like the navigation bar to be like dootrix.com, where it is sort of ingrained in the website and does not shrink when you scroll down!

I have created a JSFiddle with my code: https://jsfiddle.net/kpsq8r9m/

Here is my CSS:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align: center;
  border-style: solid;
  border-color: darkgrey;
  border-width: 6px;
  position: fixed;
}

li {
  display: inline-block;
}

li a {
  display: block;
  color: white;
  padding: 14px 50px;
  text-decoration: none;
}

Any help would be greatly appreciated!

EDIT: What I meant when it was "shrinking" was if I did not have position:fixed; it would extend to the entire page but when I did it shrunk. In order to see what I am talking about I would recommend trying this out in google chrome.

Answer 1

Please try:

.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}

z-index:100 should do the trick.