Help with Navigation bar

1

I created a nav bar
.bar { width: 100%; background-color: black; padding: 5px; margin: 0; position: fixed; list-style-type: none; }
and now whenever I make an element, outside that div, the nav bar moves.

2

Hi,

It would be easier if you could post your html please. Your CSS looks nice but there might be a mistake in your HTML.

Tom

3 
<div id = "bar" class = "bar">
  <h1 class= "barText">a</h1>
  <h1 class = "barText">a</h1>
  <h1 class = "barText">a</h1>
  <h1 class = "barText">a</h1>
  <h1 class = "barText">a</h1>
  <h1 class = "barText">a</h1>
  <h1 class = "barText">a</h1>
  <h1 class = "barText">a</h1>
  <h1 class = "barText">a</h1>
  <h1 class = "title">aa</h1>
</div>

Any elements I put after that makes the navigation bar move. I think the navigation bar is moving wherever the elements are.

4 
.bar {
  width: 100%;
  background-color: black;
  padding: 5px;
  margin: 0;
  position: fixed;
  list-style-type: none;
}

.barText {
  color: white;
  display: block;
  padding: 10px;
  margin: 10px;
  font-family: 'Abril Fatface', cursive;
  display: inline;
  float: left;
  font-style: italic;
}

Those are the classes.

5

You have told the web browser that the position of your bar is ‘fixed’ but you have not specified where it supposed to be fixed.
Add:
top: 0px;
left: 0px;

to your .bar class so it looks like this:

position: fixed;
top: 0px;
left: 0px;

1 Like