Search code examples
htmlcsscenterzurb-foundationnav

How to Center your Foundation Nav bar/ Top-bar

There are loads of posts about this asking for an answer, most are half right or just don't work.

You can use the example nav-bar and add acouple of edits which will be in the answer below.

Solution

  • simply copy and paste the Foundation top-bar example from here. Put this in your HTML,

    1. Delete the left or right section of the top-bar
    2. Delete left and right from the <ul class="left">' or '<ul class="right">
    3. Delete <h1><a href="#">Top Bar Title </a></h1> from the title section.

    4. Add

      .top-bar-section ul {display: table; margin: 0 auto;}

.top-bar-section ul li {display: table-cell;}

    in @media only screen and (min-width: 58.75em) { Just before the } closing tag.

    This should now leave you with 3 buttons if you chose the left side and it should be perfectly centered