Menu doesn't display horizontally

Question

I am following the tutorial for the Foundation Top Bar and when running the code on the browser (Firefox and Chrome) it displays vertically not horizontally. I've tried using the display setting, changing it to inline and inline block and the problem remains.

As it is now there is no overriding CSS on it via the app.css file just the out of the box css in foundation.css file. Any ideas what could be causing this ? Thanks

<div class="top-bar">
<div class class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
 <li class="menu-text">Site Title</li>
  <li>
    <a href="#">One</a>
    <ul class="menu vertical">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
  <li><input type="search" placeholder="Search"></li>
  <li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>

Answer 1

There are multiple ways of doing that. You can, for example, either use inline, inline-block or flexboxes. You can learn more on the difference between inline and inline-block here, though, I believe using flexboxes is much more convenient and flexible (no pun intended).

Inline : Most likely not the best option.

Inline items are pretty restrictive. They only support margin-left, margin-right, padding-left, padding-right. Also, they do not have a height.

Inline-block : A better option.

Inline-block items support margin, padding, width, height. It's useful for vertical centering.

Although, you will need to deal with the whitespaces between the elements. This can become a pain sometimes.

Floats : A good option.

A lot of layout frameworks use floats. They are pretty handy, and there is a lot of documentation because they've been around for a while.

Flexboxes : Probably the best option currently available.

Flexboxes give you a lot of freedom. They support all of the above, plus a few extras.

The order of the items is independent from the source. You can order your items directly in the css, which can be pretty useful (for responsive layouts, for example). It also supports equal-height.

Flexboxes have a steep learning curve though, IMHO. The syntax is not very intuitive, and your template can sometimes get bloated with a lot of wrapper divs.

/* Inline example */
.inline li {
    display: inline;
}


/* Inline-block example */
.inline-block li {
    display: inline;
}


/* Floats example */
.float li {
    float: left;
}


/* Flexboxes example */
.flexboxes ul {
    display: flex;
}

.flexboxes .menu-item {
    flex: 2;
}

.flexboxes .site-title {
    flex: 1;
}


/* Common */
ul {
  list-style-type: none;
}

div {
    width: 100%;
}

li {
    background-color: #ccc;
}

<div class="inline">
  <ul>
    <li>Site Title</li>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
  </ul>
</div>

<div class="inline-block">
  <ul>
    <li>Site Title</li>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
  </ul>
</div>
<div class="float">
  <ul>
    <li class="site-title">Site Title</li>
    <li class="menu-item"><a href="#">One</a></li>
    <li class="menu-item"><a href="#">Two</a></li>
    <li class="menu-item"><a href="#">Three</a></li>
  </ul>
</div>
<br>
<div class="flexboxes">
  <ul>
    <li class="site-title">Site Title</li>
    <li class="menu-item"><a href="#">One</a></li>
    <li class="menu-item"><a href="#">Two</a></li>
    <li class="menu-item"><a href="#">Three</a></li>
  </ul>
</div>