Help with Navigation bar

Help with Navigation bar
0

#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;