Foundation 5 - отзывчивый пункт меню

Question

У меня есть адаптивное меню в отзывчивом 5 (5.4.7). Мобильное меню (значок гамбургера) отображается ниже 640 пикселей, между 640 и 1185 пикселями мобильное меню исчезает, но обычное меню не отображается должным образом. Как изменить точку разрыва мобильного меню с 640 на 1185 (или какое-то другое обозначение).

<nav class="top-bar" data-topbar role="navigation">
     <ul class="title-area">
         <li class="name">
              <h1 data-finder-type="Web App" data-finder-name="Logo" data-finder-id="7616221"><a href="/"><img src="{{ companyInfo['Logo']}}" alt="logo"></a></h1>
         </li>
         <li class="toggle-topbar menu-icon"><a href="#"><span></span></a> 
         </li>
     </ul>
     <section class="top-bar-section">
        <ul>
            {module_menu, version="2", menuId="1405853", moduleTemplateGroup="Default"}
        </ul>
     </section>
</nav>

Answer 1

Перейдите в файл _settings.scss и около строки 1425 вы увидите переменную (которая может быть закомментирована по умолчанию):

$topbar-media-query: $medium-up;

Удалите символ «//», чтобы он больше не был закомментирован, затем измените значение «$ medium-up» на «$ large-up» или, точнее, на 1185px. Так это будет выглядеть примерно так:

$topbar-media-query: $large-up;
OR
$topbar-media-query: 1185px;

Установка переменной '$ large-up' приводит к отображению меню мобильного гамбургера со средним размером области просмотра вниз.

Я знаю, что вы не просили об этом, но если вы хотите, чтобы меню мобильного гамбургера всегда показывало, вы можете сделать следующее:

$topbar-media-query: 9999px;