Search code examples
htmltwitter-bootstrapcssmedia-queries

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 width... 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.

Preview:

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>
</button>

<div class="collapse navbar-collapse">
<nav id="nav">
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav') ); ?>
</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?

UPDATE

JSFiddle

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

Solution

  • 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