CODEWITHSUNDEEP
csszurb-foundation-6
Chris Nevill
Chris Nevill

Reputation: 6152

Top Bar elements not lined up

What am I doing wrong here using Foundation 6 top bar to cause the menu items to not line up.:

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li class="menu-text"><a href='#'>HandyMan!</a></li>                 
      <li><a href="/gallery">Gallery</a></li>                          
    </ul>
  </div>  
</div>

As can be seen in this JSFiddle: https://jsfiddle.net/4ky7jjja/

I'm using documentation from here: http://foundation.zurb.com/sites/docs/top-bar.html

I've added a hyperlink but surely that would be a normal thing to do on a menu bar like this.

Upvotes: 0

Views: 27

Answers (1)

sn3ll
sn3ll

Reputation: 1685

The class menu-text on the first <li> is adding extra padding that the second one (with the link) does not have. Either remove that class, add it to the other li, or override the padding with your own css.

Upvotes: 1

Related Questions