Menu icon Foundation
Alignment problems with Foundation 6.4

I installed foundation 6.4 with the Zurb template. I took the index.html file that comes with the installation and copied the top-bar from the docs to the beginning of the file. That worked fine with a drop-down menu on the left and a search bar on the right. Then I reversed the two. This didn't work properly. The drop-down menu stayed on the left followed by the search bar. I haven't been able to get a drop-down menu in the right part of the bar. 

Another alignment problem I found was with the media object. I couldn't get a media-object-section to align on the middle or the bottom.

foundation 6.4top-barmedia-object

I installed foundation 6.4 with the Zurb template. I took the index.html file that comes with the installation and copied the top-bar from the docs to the beginning of the file. That worked fine with a drop-down menu on the left and a search bar on the right. Then I reversed the two. This didn't work properly. The drop-down menu stayed on the left followed by the search bar. I haven't been able to get a drop-down menu in the right part of the bar. 

Another alignment problem I found was with the media object. I couldn't get a media-object-section to align on the middle or the bottom.

Rafi Benkual over 1 year ago

George - can you post an example so we can help you more? A codepen or code example will do a long way

George Benthien over 1 year ago

I downloaded the latest verson of zurb template and reinstalled it. The problem I had with with the top-bar no longer occurs. However, I still have a problem with the media object. Below is the code I used

<div class="media-object">
  <div class="media-object-section">
      <img src= "http://via.placeholder.com/150x150" />
  </div>
  <div class="media-object-section middle">
      <img src= "http://via.placeholder.com/50x50" />
  </div>
  <div class="media-object-section bottom">
      <img src= "http://via.placeholder.com/75x75" />
  </div>
</div>

Even though I have specified middle and bottom on the last two images, they all align on the top.

David Williamson 10 months ago

I also think that the media object alignment is broken. Everything aligns to the top and the middle and bottom classes have no effect.

George Benthien 10 months ago

It does seem to work If you set

$global-flexbox: false;

in _settings.scss