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 about 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 about 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 5 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 5 months ago

It does seem to work If you set

$global-flexbox: false;

in _settings.scss