Foundation 6: top-bar-right and left stack when wrapping

Question

When designing a webpage using Zurb Foundation 6, top-bar-left and top-bar-right of the navigation menu stack when put into a wrap class, even when scaled to full screen. The top-bar-right ends up being just below and indented from top-bar-left. How do I fix this issue so that the top-bar-right section stays in line with top-bar-left and is not stacked?

The top-bar-right section works fine when the wrap class is not applied to a div within the nav class. I've tried only applying the wrap class to top-bar-left only instead of the entire nav class, and also tried a "float: right" for top-bar-right in CSS, but neither method solved the problem.

HTML code:

<!-- DESKTOP NAVIGATION -->
    <nav class="top-bar">
        <div class="wrap">
          <div class="top-bar-left">
            <h3>Site Title</h3>
          </div> 
          <div class="top-bar-right">
            <ul class="menu">
              <li><a href="#">About</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
        </div> 
    </nav>

And the CSS:

/*GENERAL*/
.wrap {
    width: 90%;
    max-width: 1100px;
    margin: 0px auto;
}

Aimee Aimee · Accepted Answer · 2019-06-13T23:00:42

There are attributes on top-bar that are making its dependents display inline and stack for narrow displays (display: flex for one). You could apply all the appropriate attributes to the wrap class as well but why reinvent the wheel? Doesn't that negate the whole reason for using a grid system in the first place? Try removing the extra div and put the wrap class on the nav element instead:

    <nav class="top-bar wrap">
      <div class="top-bar-left">
        <h3>Site Title</h3>
      </div> 
      <div class="top-bar-right">
        <ul class="menu">
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>

Or to simplify things, you could just put those attributes on .top-bar and not have a wrap class:

.top-bar {
    width: 90%;
    max-width: 1100px;
    margin: 0px auto;
}

If you need a wrapper div, put it outside top-bar, not inside.

Foundation 6: top-bar-right and left stack when wrapping

1 Answers