Выпадающий список Topbar Zurb Foundation исчезает на маленьких экранах

Question

Это вызывает беспокойство, потому что единственная причина, по которой я хочу использовать верхнюю панель, - это использовать меньшие экраны. Выпадающее меню отлично работает на средних и больших размерах, но исчезает на меньших экранах. Я читал, что он должен быть внутри столбца шириной 12, но это, похоже, не помогает. Фактически она ввела другую (второстепенную) проблему, когда панель больше не заполняет ширину экрана. Выпадающий список всего 4 символа, как он может быть слишком большим? Что мне здесь не хватает?

<div class="row"> 
<div class="fixed small-12 medium-12 large-12 column"> 
<nav class="top-bar" style="color: white;" data-options="is_hover:false" data-topbar=""> 
    <ul class="title-area"> 
    <li class="name"></li> 
    </ul> 
    <section class="top-bar-section"> 
    <ul class="left"> 
     <li class="has-dropdown"> 
     <a href="#">Menu</a> 
     <ul class="dropdown"> 
      <li>Test</li> 
      <li>Test</li> 
      <li>Test</li> 
     </ul> 
     </li> 
    </ul> 
    </section> 
</nav> 
</div> 
</div> 

большой:

маленький:

Answer 1

Он все еще нуждается в некоторые настройки, но я установил ее. Я добавил

style="display: none;" 

в

<ul class="title-area"> 

Похоже, они оба пытаются занять то же место.

Answer 2

Я прочитал это должно быть внутри 12-ширина колонки ...

Я действительно не думаю, что это правильно; это и есть причина проблемы, которую вы ввели.

На самом деле я хотел бы изменить

<div class="fixed small-12 medium-12 large-12 column"> 

в

<div class="fixed"> 

Если хочет, чтобы показать для маленьких экранов только тогда вы могли бы сделать, как это

<div class="fixed show-for-small-only"> 

Также не стоит забывать для повторной инициализации или повторного использования слушателей по documentation (в самом конце страницы).

$(document).foundation(); 

и

$(document).foundation('topbar', 'reflow'); 

отметить также элементы списка должны содержать ссылки. Изменение

<li>Test</li> 
    <li>Test</li> 
    <li>Test</li> 

в

<li><a href="#">Test</a></li> 
    <li><a href="#">Test</a></li> 
    <li><a href="#">Test</a></li> 

---

Это не совсем то же самое, но может быть полезно. Я использую верхнюю панель для средних и больших экранов, и я использую панель вкладок для небольших экранов.

Вы можете найти вдохновение на моем website. Не стесняйтесь осмотреть его. Это также на GitHub.

Основано на Zurb-Foundation 5 documentation. Надеюсь, с этим не должно быть сложно справиться.

Answer 3

Также заметили, что вам не хватает значка мобильного меню.

Должен быть литий в заглавной области

 <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>