Search code examples
htmlcssnavigationnav

Navigation showing in wrong order

I have my navigation shown like so:

#header-menu #navigation {
  text-align: right;
}
#header-menu #navigation ul {
  display: inline-block;
}
#header-menu #navigation ul li {
  float: right;
  margin: 10px;
  display: flex;
  align-items: center;
  height: 80px;
}
#header-menu #navigation ul li a {
  text-decoration: none;
  color: white;
  font-weight: 800;
  font-size: 14pt;
}

<div id="navigation" class="col-xs-9">
  <ul>
    <li><a href=""><span>Home</span></a>
    </li>
    <li><a href=""><span>about</span></a>
    </li>
    <li><a href=""><span>products</span></a>
    </li>
    <li><a href=""><span>blog</span></a>
    </li>
    <li><a href=""><span>contacts</span></a>
    </li>
  </ul>
</div>

But for some reason when shown like it is ordered from bottom to time so:

Contacts Blog Products About Home...

How can I make it so its the proper order from top to the bottom.

Cheers

Solution

  • You're setting a float on the li elements which means that whatever the first element is, will always be the first one on the right.

    Try changing your CSS to this:

    #header-menu #navigation {
  text-align: right;
}
#header-menu #navigation ul {
  display: inline-block;
  float: right;
}
#header-menu #navigation ul li {
  margin: 10px;
  display: flex;
  align-items: center;
  height: 80px;
}
#header-menu #navigation ul li a {
  text-decoration: none;
  color: white;
  font-weight: 800;
  font-size: 14pt;
}