0

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>
Ssswift
  • 916
  • 10
  • 20
user3638587
  • 9
  • 1
  • 4

1 Answers1

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>
Antoine Boisier-Michaud
  • 1,575
  • 2
  • 16
  • 30
  • 1
    yes, when you learn from W3S that you (ahem) use `inline`, but when you learn from better resources (like SO and many other) than you'd better go using `inline-block` or `floats`.or `flexbox` or (soon) `grid` – Roko C. Buljan Jun 10 '17 at 12:53
  • 1
    Mmm I agree, my answer is pretty poor. I'll update it. – Antoine Boisier-Michaud Jun 10 '17 at 12:58
  • 1
    Thanks Ssswift for all the input and time spent on the answer, and thanks Antoine and Roko for your help. I think I'll use float as they're already used on the Foundation grid I'm working with. Although if I used inline-block whitespace shouldn't be a problem, I was going to nest the menu in a container to which I will apply a background image. – user3638587 Jun 11 '17 at 13:36