Nav bar - last element float right but not wrap

Just when I think I start to understand css...

The last item in my nav-bar is the current user. I want this to float right but then be hidden and NOT wrap if the user sizes the screen narrow. I have been able to either get it to float right or not wrap but never both at once. I want to eat the cake.

Here is a simple example that demonstrates the problem. Much thanks in advance! - Jon

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

ul {
  position: relative;
  list-style-type: none;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  display: inline-block;
}

li a {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: wheat;
}

.current-user {
  color: lightblue;
  margin-top: 10px;
  margin-right: 10px;
  float: right;
}

<navbar class="nav-bar">
  <ul>
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link4</a></li>
    <li><a href="#">link5</a></li>
    <li><a href="#">link6</a></li>
    <li><a href="#">link7</a></li>
    <li><a href="#">link8</a></li>

    <!-- Joe float right but be hidden if overflow -->
    <li class="current-user">Joe Doe</li>
  </ul>
</navbar>

Solution

Method #1:

I would suggest using a media query and hiding it that way. For example:

  @media screen and (max-width: 620px) {
    .current-user {
      display: none;
    }
  }

The above CSS will only be applied when the screen width is below 620 pixels. You can, of course, adjust this as needed.

Here your entire code:

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

ul {
  position: relative;
  list-style-type: none;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  display: inline-block;
}

li a {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: wheat;
}

.current-user {
  color: lightblue;
  margin-top: 10px;
  margin-right: 10px;
  float: right;
}

@media screen and (max-width: 620px) {
  .current-user {
    display: none;
  }
}

<navbar class="nav-bar">
  <ul>
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link4</a></li>
    <li><a href="#">link5</a></li>
    <li><a href="#">link6</a></li>
    <li><a href="#">link7</a></li>
    <li><a href="#">link8</a></li>

    <!-- Joe float right but be hidden if overflow -->
    <li class="current-user">Joe Doe</li>
  </ul>
</navbar>

For more on media queries see: these docs

Method #2:

You could also position the element absolutely instead of floating it. For example:

.current-user {
  position: absolute;
  right: 0;
}

Here a snippet:

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

ul {
  position: relative;
  list-style-type: none;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  display: inline-block;
}

li a {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: wheat;
}

.current-user {
  color: lightblue;
  margin-top: 10px;
  margin-right: 10px;
  position: absolute;
  right: 0;
}

<navbar class="nav-bar">
  <ul>
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link4</a></li>
    <li><a href="#">link5</a></li>
    <li><a href="#">link6</a></li>
    <li><a href="#">link7</a></li>
    <li><a href="#">link8</a></li>

    <!-- Joe float right but be hidden if overflow -->
    <li class="current-user">Joe Doe</li>
  </ul>
</navbar>

This way the element will not wrap. You would, however, have to fix the overlapping. You could do this by assigning a background color to your nav items and ensuring that they slide over the user element by adjusting z-index.

I believe method #1 would be a cleaner solution.