How can I make a fixed responsive top navigation?

Question

I would like to make a top navigation "fixed" bar.
I'm currently experimenting with the code over on W3C .

Unfortunately the navigation bar is not fixed, how can I make it fixed?

NOTE: I have tried position: fixed; but it is not working as expected.

Answer 1

Try this CSS:

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

See https://developer.mozilla.org/en-US/docs/Web/CSS/position

If you use a navbar like that you'll generally want to give it a height (eg 50px) and then offset the rest of your content by that much (eg margin-top: 50px; on your content container.

Answer 2

If you copy their code exactly on W3Schools and add the following onto the ul:

width: 100%;
top: 0;
left: 0;
position: fixed;

You'll get a fixed position on the ul, it will be pushed all the way to the left (no spacing), and all the way up the top (no spacing). Width (100%) just stretches the block across the web-browser (in respect to its size). You could additionally add a class or an id onto the already existing ul (incase you have multiple existent ul elements) by using div#fixed-navigation for id or div.fixed-navigation for class (in CSS).

So in total you either have: <ul id="fixed-navigation"> or <ul class="fixed-navigation"> (if you choose to use an id or class attribute).

I created a working example for you on JSFiddle: https://jsfiddle.net/799rm54n/