Меню Foundation5 всегда отзывчиво

Question

Я использую foundation5 для отзывчивости в моей теме WordPress. Как определить в foundation5 меню, чтобы оно выглядело отзывчивым даже в большом разрешении. В настоящее время он свернут до 73.2142857143em. Я хочу, чтобы меню всегда было свернуто, даже для ширины 2000ем.

Здесь мой HTML.

<section id="navBar">
<div class="contain-to-grid clearfix sticky">
    <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large;">
        <ul class="title-area">
            <li class="name">logo</li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>
        <section class="top-bar-section">
            <ul id="menu-top-menu" class="top-bar-menu left"><li id="menu-item-567" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item active menu-item-567 active"><a href="http://url.loc/coming-soon/">Search</a></li>
                <li id="menu-item-570" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-570"><a href="http://url.loc/kategorie/">Category</a></li>
                <li id="menu-item-584" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-584"><a href="http://url.loc/faq/">Faq</a></li>
            </ul>                       </section>
    </nav>
</div>

Спасибо заранее за вашу помощь.

Answer 1

В Foundation 5.5.3 вы можете изменить ширину точки останова верхней панели, обновив foundation.css. В следующих двух местах я изменяю точку останова на 9999 пикселей (или что угодно):

Изменить ширину медиазапроса:

@media only screen and (min-width: 9999px) {
  .top-bar {
    ...blah.blah.blah

и этот стиль

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:9999px)/";
  width: 9999px;
}

Это должно работать, но если это не так, дайте нам знать, какую версию Foundation 5 вы используете (в теме WordPress).

Answer 2

Было бы легче помочь, если бы вы добавили CSS, но все, что вам нужно сделать, это изменить значение медиазапроса на ширину, на которую вы хотите, чтобы меню реагировало, или просто заменить существующее меню CSS на CSS внутри носителя. запрос, поэтому он всегда будет отзывчивым