user4756836 user4756836 - 4 months ago 5x
HTML Question

Maintaining alignment of navigation items of different widths on smaller screens

I am trying to align my navigation menu on my wordpress website. The only issue I have is that when the browser is scaled down to mobile

... the last item in the navigation is not aligned with other items in the navigation because the item before it is only 3 letters long.


enter image description here

My code:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

<div class="collapse navbar-collapse">
<nav id="nav">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav') ); ?>

I am using media queries currently:

@media only screen and (min-width: 388px) and (max-width: 480px) {
.nav li:last-child a {
margin-left: 20px;

But when I resize the browser... it goes to that point where the aligning is messed up at
width 388px
while on my
iphone 6
it goes to that point at
width 375px
. Is there a better way to align my menu or should I stick to media queries here?



Please change the width to 438px on the JSFiddle output panel to reproduce the issue.


Why not just make all nav items the same width, so they all consume equal space on the page?

Try this:

#nav li {
  /* padding: 0 16px;  <-- remove; use text-align instead */
  font: 400 18px/13px 'Open Sans', sans-serif;
  display: inline-block;
  width: 5em;
  text-align: center;
  border: 1px solid black; /* for illustration only */

Revised Demo