Collapsing margin on menu overflow

Question

I am trying to prevent my menu from overlapping onto itself when the viewport gets small and the menu items get pushed to the next line. Seems like a simple problem but I have spent hours on this problem with no avail.

nav {
  position: absolute;
  width: 100%;
  text-align: center;
}
nav li {
  display: inline-block;
}
nav a {
  text-decoration: none;
  padding: 1em;
  margin: 1em;
  border: 2px solid black;
}

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">NavItem</a>
        </li>
        <li><a href="#">NavItem</a>
        </li>
        <li><a href="#">NavItem</a>
        </li>
        <li><a href="#">NavItem</a>
        </li>
        <li><a href="#">NavItem</a>
        </li>
      </ul>
    </nav>
  </header>
</body>

Now shrink your window and the items all overlap.

Sebastian Simon · Accepted Answer · 2016-06-09 22:34:47Z

1

Change the nav a{} to nav li{}:

nav li {
  text-decoration: none;
  padding: 1em;
  margin: 1em;
  border: 2px solid black;
}

See the JSFiddle.

edited Jun 9, 2016 at 22:34

Sebastian Simon

19.8k8 gold badges61 silver badges88 bronze badges

answered Jun 9, 2016 at 22:30

Adam Buchanan Smith

9,4675 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sebastian Simon Over a year ago

There’s already another rule for nav li, so in this case it’s better to merge them.

Collectives™ on Stack Overflow

Collapsing margin on menu overflow

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related