CODEWITHSUNDEEP
csshtml
Austin James
Austin James

Reputation: 11

Nav bar align: Logo on left, links on right

I'm having trouble getting the alignments right on a nav bar. I'm trying to figure out how to get the logo part to stay on the left of the nav bar, but put the links on the right side. I've tried using float: right but I can't seem to get it to work on just the links. How can I do this?

https://jsfiddle.net/t46bcayd/1/

<nav>
    <ul>
        <li><a href="http://google.com/" class="logo">Logo</a></li>
        <li><a href="http://google.com/">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
    </ul>
</nav>

Upvotes: 1

Views: 19418

Answers (4)

Paulie_D
Paulie_D

Reputation: 114991

Flexbox is perfect here...no need to change the structure, unless you want to.

body {
  margin: 0;
  padding: 0;
  font-size: 15px;
}
nav {
  background-color: black;
  margin: 0;
  overflow: hidden;
}
nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}
nav ul li {
  display: inline-block;
  list-style-type: none;
}
nav ul li a {
  color: white;
  background-color: red;
  display: block;
  line-height: 3em;
  padding: 1em 3em;
  text-decoration: none;
}
nav ul li:first-child {
  margin-right: auto;
}
nav ul li a.logo {
  background-color: green;
}
nav ul li a:hover {
  background-color: blue;
}
<nav>
  <ul>
    <li><a href="http://google.com/" class="logo">Logo</a>
    </li>
    <li><a href="http://google.com/">One</a>
    </li>
    <li><a href="#">Two</a>
    </li>
    <li><a href="#">Three</a>
    </li>
  </ul>
</nav>

Upvotes: 11

Richard Hamilton
Richard Hamilton

Reputation: 26434

Use the float:left property

body {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

nav {
    background-color: black;
    margin: 0;
    overflow: hidden;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li:not(:first-child) {
  float: right;
}

nav ul li {
    display: inline-block;
    list-style-type: none;
}

nav ul li a {
    color: white;
    background-color: red;
    display: block;
    line-height: 3em;
    padding: 1em 3em;
    text-decoration: none;
}

nav ul li a.logo {
    background-color: green;
}

nav ul li a:hover {
    background-color: blue;
}
<nav>
  <ul>
    <li><a href="http://google.com/" class="logo">Logo</a></li>
      <li><a href="http://google.com/">Three</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">One</a></li>
  </ul>
</nav>

I did have to change the order so they showed up right

Upvotes: 0

Carsten
Carsten

Reputation: 326

You could use flexbox for this.

<style>
    nav{
       display:flex;
       justify-content: space-between;
       align-items: center;
    }
</style>
<nav>
    <a href="http://google.com/" class="logo">Logo</a>
    <ul>
        <li><a href="http://google.com/">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
    </ul>
</nav>

Remember prefixes ... works in IE > 9

Upvotes: 0

j08691
j08691

Reputation: 207861

If you remove the inline-block rule for the list items you can float the first one left and the others right:

li {
    float: right;
}

li:first-child {
    float: left;
}

jsFiddle example

You'd also need to re-order the list items that are floated right to:

<li><a href="http://google.com/" class="logo">Logo</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Two</a></li>
<li><a href="http://google.com/">One</a></li>

Upvotes: 1

Related Questions