CODEWITHSUNDEEP
htmlcssheadernav
John M.
John M.

Reputation: 11

Why are the <li> <nav> elements in my header stepping down when I shrink browser window?

Upon resizing the browser window the last <li> element in the navigation bar of this site always jumps down to a new line as the browser gets to its smallest size, rather than all the elements remaining in line. I've tried minimizing margins and padding but it hasn't resolved the issue.

I'm in the CSS portion of a web development class, and we're being asked to use max-width and mid-width properties along with percentages to size the main sections of our practice sites (to get us used to working with percentages and such), and I feel like that must be part of the issue.

Any thoughts much appreciated. I've also tried adjusting white-space property, wrapping the <nav> in another div, etc. Not sure what's gone wrong.

<!DOCTYPE html>
<html>

<head>

  <!-- font-family: 'Open Sans', sans-serif; -->
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <style type="text/css">
    * {
      font-family: 'Open Sans', sans-serif;
    }
    * {
      list-style-type: none;
    }
    /* Section Sizes */
    body {
      background-color: #ffffff;
      margin: 0;
      padding: 0;
      width: 100%;
      min-width: 480px;
    }
    header {
      width: 100% min-width: 480px;
      height: 4rem;
    }
    .width,
    #container {
      min-width: 480px;
      max-width: 1080px;
      margin: 0 auto;
      width: 100%;
    }
    .width:after,
    #container:after,
    header:after,
    ul:after,
    li:after,
    #articles:after {
      display: table;
      content: "";
      clear: both;
    }
    /* Header Styles */
    header {
      border-bottom: 1px solid #0099cc;
      margin-bottom: 4rem;
    }
    header .width h1 {
      float: left;
      margin: 0;
      margin-right: 5rem;
      margin-top: 0.7rem;
      color: #ce6d0b;
      font-size: 1.4rem;
      font-weight: 400;
      padding: 0;
    }
    header .width ul {
      bottom: 0;
      padding: 0;
    }
    header .width ul li {
      float: left;
    }
    header .width ul li:last-child {
      padding-right: 0;
    }
    header .width ul li a {
      color: #8c8c8c;
      text-decoration: none;
      border-bottom: 10px solid transparent;
      font-size: 1.1rem;
      display: block;
      text-align: center;
      padding: 0.95rem 1.5rem;
    }
    header .width ul li a:hover {
      border-bottom: 10px solid #0099cc;
      color: #404040;
    }
    header .width ul .active a {
      color: #404040;
      border-bottom: 10px solid #0099cc;
    }
  </style>

</head>

<body>

  <!-- global site header -->
  <header>
    <div class="width">
      <h1>Mockup 2</h1>
      <nav>
        <ul>
          <li class="active"><a href="#" title="Dashboard">Dashboard</a>
          </li>
          <li><a href="#" title="Section 2">Section 2</a>
          </li>
          <li><a href="#" title="Section 3">Section 3</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

</body>

</html>

http://jsbin.com/vahemoy/edit?html,output

Thank you.

Upvotes: 0

Views: 44

Answers (1)

Chad
Chad

Reputation: 693

Elements with float: left will wrap like text does if there isn't enough room. What you have to do is make sure there's always enough room for all your elements inside their container. In this case, the last li wraps at 572px for me, but you have min-width set to 480px.

Try increasing your min-width. Then when the window shrinks, you'll get a scroll bar to see the rest of your content, rather than having it wrap.

Upvotes: 1

Related Questions