How can I style a menu bar, so that menu items have an equal amount of padding, also when the menu is resized?

HTML & CSS
1

Hi,

How can I style a menu bar, so that when the width of its container is between (ca.) 800px and 1200px, the menu items are distributed with an equal amount of padding on either side?

This is what I currently have:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Equally spaced nav bar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      #wrapper{
        margin: 0 auto;
        max-width: 1200px;
      }

      #nav {
        width: 100%;
        height:50px;
        float: left;
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: #f2f2f2;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;
      }

      #nav li {
        float: left;
      }

      #nav li a {
        display: block;
        padding: 15px 35px 17px 35px;
        text-decoration: none;
        font-size:16px;
        font-weight: bold;
        color: #26419a;
        border-right: 1px solid #ccc;
      }

      #nav li:last-child a {
        border-right: none;
      }

      #nav li a:hover {
        background-color: #fff;
      }
    </style>
  </head>

  <body>
    <div id="wrapper">
      <ul id="nav">
        <li><a href="index.html" class="selected">Home</a></li>
        <li><a href="produkte.html">Produkte</a></li>
        <li><a href="service.html">Service</a></li>
        <li><a href="mietgeraete.html">Mietger&auml;te</a></li>
        <li><a href="unser_team.html">Unser Team</a></li>
        <li><a href="stihltesttag.html">Stihltesttag</a></li>
        <li><a href="anfahrt.html">Anfahrt</a></li>
        <li><a href="kontakt.php">Kontakt</a></li>
        <li><a href="partner.html">Partner</a></li>
      </ul>
    </div>
  </body>
</html>

This works great when the width of div#wrapper is 1200px.

When I decrease the size of the viewport to below 1200px however, menu items start being knocked off of the menu bar and on to the next line.

987Ă—95 8.94 KB

What I would ideally like is for the padding on the left and right of the menu items to adjust itself, so that all of the menu items remain on the same line.

Could anyone give me a clue as to how this can be achieved?

Here is the code in a CodePen.

Thanks in advance.

2

Hello Pullo,

You won’t want to do this in floats; they don’t allow for this sort of behavior (easily.)

Look here; http://codepen.io/anon/pen/wBeYNW

Tables/table-cells are your best approach probably. As you can see, if you get too small, this turns out to be quite gruesome to look at. As part of making this responsive (which I assume you will be) I’d add in a part in your “medium” size styles to change this up.

I made your padding percents since horizontal padding bases its value off of hte width of the element (you originally had px which won’t allow for adjustment.)

Let me know if you have any questions.

1 Like
3

Hey Ryan,

That was quick :smile:

Thanks for the amended code. It’s definitely a lot closer to what I want, but it seems that now the padding on the right of the item isn’t preserved:

769Ă—58 8.83 KB

Is there any way to compensate for that?

4

Well let me ask you this; when the screen gets smaller like this (and less room becomes available, as your screenshot shows), ideally what would you like to happen? There is only so much room to work with.

Slightly modifed the menu (not posting as a finished product; only posting so I have a reference point for when you reply). This is an upgrade though.

5

To be honest, I don’t see any reason to be using the horizontal padding like you were doing. If you were trying to center it, you could simply use text-align:center; as shown in my example.

6

Awesome!
That does the trick.
Thank you very much.

7

You’re quite welcome!

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.