Navbar adds unneccisary line when resized

user_14506442 0
Viewed 33

I am making a site with a navbar, but when I resize the page, sometimes one link goes on an extra line like this: Navbar Example

How can I fix this? Here is my code:

body {
    margin: 0;
    background-color: white;
}

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    background-color: #F27930;
    box-shadow: 5px 0px 0px 0px 5px lightgrey;
}

li {
    float: left;
    font-family: roboto;
    color: white;
}

li a.link {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
}

li a.current {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.divider {
    display: block;
    top: 50%;
    font-size: 25px;
    color: #FCD031;
    text-align: center;
    padding: 8px 2px;
    text-decoration: none;
}

li a:hover {
    background-color: #feae02;
}

li a.current:hover {
    background-color: #F27930;
}

li a.divider:hover {
    background-color: #F27930;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<div class="sticky">
    <ul>
        <li><a class="current"><b>Jump to Article:</b></a></li>
        <!-- <hr class="hrNav"> -->
        <li><a class="link" href="#top">Top</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article1">Article 1</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article2">Article 2</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article3">Article 3</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article4">Article 4</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article5">Article 5</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article6">Article 6</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article7">Article 7</a></li>
    </ul>
</div>

Any help would be much appreciated!

Thanks, Jasper

navbar html-lists css html
2 Answers

The only way you can avoid the nav bar word wrapping is by setting a minimum width on the nav bar, or add a media query to change it when the screen is too small.

Using the min-width CSS attribute.

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width-device-width, initial-scale-1.0">
  <title>Navbar Example</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0;
      background-color: white;
    }
    
    div.sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }
    
    ul {
      list-style-type: none;
      margin: 0;
      padding-left: 0px;
      padding-right: 0px;
      overflow: hidden;
      background-color: #F27930;
      box-shadow: 5px 0px 0px 0px 5px lightgrey;
    }
    
    li {
      float: left;
      font-family: roboto;
      color: white;
    }
    
    li a.link {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 14px;
      text-decoration: none;
    }
    
    li a.current {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    .divider {
      display: block;
      top: 50%;
      font-size: 25px;
      color: #FCD031;
      text-align: center;
      padding: 8px 2px;
      text-decoration: none;
    }
    
    li a:hover {
      background-color: #feae02;
    }
    
    li a.current:hover {
      background-color: #F27930;
    }
    
    li a.divider:hover {
      background-color: #F27930;
    }
  </style>
</head>

<body>
  <div class="sticky">
    <ul style="min-width:884px">
      <li><a class="current"><b>Jump to Article:</b></a></li>
      <!-- <hr class="hrNav"> -->
      <li><a class="link" href="#top">Top</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article1">Article 1</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article2">Article 2</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article3">Article 3</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article4">Article 4</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article5">Article 5</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article6">Article 6</a></li>
      <li><a class="divider">|</a></li>
      <li><a class="link" href="#article7">Article 7</a></li>
    </ul>
  </div>
</body>

</html>

user_142512210

That is a padding issue.

So, there'll be 2 solutions.

  • use @media to let the menu contains breadcrumb when the browser width is small.
  • if you're going to force display the navigation items by line breaking, then use flex

Just add 2 lines to your ul style

ul {
  ...
  display: flex;
  flex-flow: row wrap;
}

So, the final result will be

body {
    margin: 0;
    background-color: white;
}

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    background-color: #F27930;
    box-shadow: 5px 0px 0px 0px 5px lightgrey;
}

li {
    float: left;
    font-family: roboto;
    color: white;
}

li a.link {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
}

li a.current {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.divider {
    display: block;
    top: 50%;
    font-size: 25px;
    color: #FCD031;
    text-align: center;
    padding: 8px 2px;
    text-decoration: none;
}

li a:hover {
    background-color: #feae02;
}

li a.current:hover {
    background-color: #F27930;
}

li a.divider:hover {
    background-color: #F27930;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<div class="sticky">
    <ul>
        <li><a class="current"><b>Jump to Article:</b></a></li>
        <!-- <hr class="hrNav"> -->
        <li><a class="link" href="#top">Top</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article1">Article 1</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article2">Article 2</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article3">Article 3</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article4">Article 4</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article5">Article 5</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article6">Article 6</a></li>
        <li><a class="divider">|</a></li>
        <li><a class="link" href="#article7">Article 7</a></li>
    </ul>
</div>

user_86830860
Related