How to Center The Zurb Foundation Top Bar Nav

How do I center the Zurb Foundation top bar nav?

You can do it by adding this to your CSS (and preferably removing conflicting styles):

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

Center elements on Zurb Foundation Top-Bar

You can use flex for that with justify-content like this

<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

.parent {
  width: 100%;
  background: red;
  height: 100px;
  display: flex;
  justify-content: center;
}

.parent div {
  padding: 0 10px;
}

I added padding just to make elements wider and to not stick to each other.

Read more about flex here

A Full-Width Centered Navigation Top Bar - Zurb Foundation

As the Foundation 4 docs saying :
http://foundation.zurb.com/docs/components/top-bar.html

If you want your navigation to be set to your grid width, wrap it in
div class="contain-to-grid".

So try using the following :

<div class="contain-to-grid">
    <!-- Your nav bar -->
    <nav class="top-bar">
        <ul class="title-area">
            <!-- Title area here... -->
        </ul>

        <section class="top-bar-section">
            <ul class="left">
                <!-- Title area here... -->
            </ul>
            <ul class="right">
                <!-- Title area here... -->
            </ul>
        </section>
     </nav>
</div>

Hope this helps !

How to Center your Foundation Nav bar/ Top-bar

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

Foundation TopBar: Position Title in Center

Add the following CSS rule to the existing code. Setting a width and margin: 0 auto will help the menu find the center.

@media (min-width: 640px) {
  .top-bar .title-area {
    float: left;
    margin: 0 auto;
    width: calc(100% - 90px);
    position: unset;
  }
}

Codeply Demo

If you do not want calc(), use a width of 85%.

centering zurb foundation fixed topbar links

You need some media queries to make this happen.

Foundation does not provide any facilities for easy media query manipulation, so i suggest using Breakpoint Slicer.

@import "foundation";
@import "breakpoint-slicer";

// For large devices only
@include from(4) {

  // Removing the title area for large devices
  .title-area {
    display: none;
  }

  // Centering the menu
  .top-bar-section {
    text-align: center;
    margin: 0 auto;
    ul {
      li {
        display: inline-block;
        a {
          font-size: emCalc(14px);
          font-weight: 400;
        }
      }
    }
  }

}

Also note the li { display: inline-block; }.

Demo: http://sassbin.com/gist/5780699/ (play with the width of the rendered page panel).

Trying to make my h1 and h2 vertically centered with ZURB Foundation navbar

You need to set the height of the parent div and apply justify-content: center instead of justify-items.

Also, it is good to reset margins to zero 0 to remove unwanted inherited browser styles.

.bg-title{
  color: black;
  font-family: 'Bungee Inline', cursive;
  font-size: 100pt;
  text-align:center;
  margin: 0;
}

.secd-title{
  color: black;
  font-family: 'Candal', sans-serif;
  margin: 0;
}

.bg-title-wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 350px;
}

<main>
  <div class="bg-title-wrap">
    <h1 class="bg-title">store name</h1>
    <h2 class="secd-title">CANNABIS CO.</h2>
  </div>
</main>

foundation 6: how to center horizontal navigation with image

I recently migrated the Centered Top Bar With Logo building block for Foundation 6. It should be exactly what you are after.

HTML

<!-- Small Navigation -->
<div class="title-bar" data-responsive-toggle="nav-menu" data-hide-for="medium">
  <a class="logo-small show-for-small-only" href="#"><img src="http://placehold.it/50x50?text=LOGO" /></a>
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<!-- Medium-Up Navigation -->
<nav class="top-bar" id="nav-menu">

  <div class="logo-wrapper hide-for-small-only">
    <div class="logo">
      <img src="http://placehold.it/350x150?text=LOGO">
    </div>
  </div>

  <!-- Left Nav Section -->
  <div class="top-bar-left">
    <ul class="vertical medium-horizontal menu">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </div>

  <!-- Right Nav Section -->
  <div class="top-bar-right">
    <ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
      <li class="has-submenu">
        <a href="#">Menu 4</a>
        <ul class="submenu menu vertical medium-horizontal" data-submenu>
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
      <li class="has-submenu">
        <a href="#">Menu 5</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>
  </div>

</nav>

SCSS

/* Variables */

// Adjust width accordingly (use even #'s)
$logo-width: 118px;
// Reduce px value to increase space between logo and menu text
$logo-padding: $logo-width - 32px; 
// Leave alone
$logo-margin: - ($logo-width / 2);

/* Small Navigation */
.logo-small {
  float: right;
}

.title-bar {
  padding: 0 .5rem;
}

.menu-icon,
.title-bar-title {
  position: relative;
  top: 10px;
}

/* Medium-Up Navigation */
@media only screen and (min-width: 40rem) { 

  .logo-wrapper {
    position: relative;

    .logo {
      width: $logo-width;
      height:  92px;
      position: absolute;
      left: 50%;
      right: 50%;
      top: -6px;
      margin-left: $logo-margin;
    }
  }

  // Right part
  .top-bar-right {
    width: 50%;
    padding-left: $logo-padding;

    ul {
      float: left;
    }
  }

  // Left part
  .top-bar-left {
    width:  50%;
    padding-right: $logo-padding;

    ul {
      float: right;
    }
  }
}

---

Related Topics