如何控制 Foundation 导航栏进入移动显示的大小？

Question

我有一个基于 Foundation 5 的站点，顶部有一个导航栏。 因为我的菜单选择是较大的文本，所以当屏幕变窄时，它们会与左侧的“名称”部分重叠。 有没有办法控制导航菜单何时滑入移动风格？

   <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
            <li class="name">
                <div class="logo">
                    <a href="#">
<img src="mylogo.png"/>
                    </a>
                </div>
            </li>
            <li class="toggle-topbar menu-icon">
                <a href="#">
                    <span></span>
                </a>
            </li>
        </ul>
        <section class="top-bar-section hide-for-medium-down ">
            <!-- Right Nav Section -->
            <ul class="right">
                <li class="active">
                    <a href="/home/index" class="menuMix">
                        @*<span class="menuMinor">Home Page</span>*@
                        <span class="menuMain allCaps">Home</span>
                    </a>
                </li>
                <li class="">
                    <a href="/home/about" class="menuMix">
                        @*<span class="menuMinor">Who We Are</span>*@
                        <span class="menuMain allCaps">About</span>
                    </a>
                </li>

                <li class="">
                    <a href="/home/contact" class="menuMix">
                        @*<span class="menuMinor">Get In Touch</span>*@
                        <span class="menuMain allCaps">Contact</span>
                    </a>
                </li>
            </ul>
        </section>
    </nav>

Answer 1

如果你使用SCSS你可以尝试减少

$topbar-link-weight: $font-weight-normal;
$topbar-link-font-size: rem-calc(13);