Foundation 5 responsive menu breaking point

Question

I have a responsive menu in responsive 5 (5.4.7). The mobile menu (hamburger icon) shows for below 640 px, between 640 and 1185px the mobile menu disappears but the normal menu doesn't display properly. How do I change the breaking point of the mobile menu from 640 to 1185 (or some other designation).

<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

Go to your _settings.scss file and around line 1425 you'll see the variable (which may be commented out by default):

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

Remove the '//' so it's no longer commented out, then change the '$medium-up' to either '$large-up' or more precisely 1185px. So it would look something like this:

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

Setting the variable to '$large-up' makes the mobile hamburger menu display from the medium viewport size on down.

I know you didn't ask for this, but if you want the mobile hamburger menu to always show you can do the following:

$topbar-media-query: 9999px;