CODEWITHSUNDEEP
htmlcssnavigationnav
Shawn T
Shawn T

Reputation: 23

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

Upvotes: 2

Views: 1989

Answers (1)

Stewartside
Stewartside

Reputation: 20905

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

Upvotes: 2

Related Questions