foundation5菜单总是响应

我在我的wordpress主题中使用foundation5作为respons。如何在foundation5中定义菜单，即使在较大的分辨率下也能看到响应。目前它已经崩溃，直到73.2142857143em。我希望菜单总是折叠，即使宽度为2000em。foundation5菜单总是响应

这里我的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>

预先感谢您的帮助。

来源

2016-07-27 harry

如果您添加了css，帮助会更容易，但您只需将媒体查询值更改为希望菜单响应的宽度，或者将现有菜单css替换为css在媒体查询中，所以它总是会有反应

来源

2016-07-27 22:07:20 Connor

该CSS是一个未经修改的基金会css（我没有把它包括为它太大，它不会很聪明）。无论如何，你提到的两件事我都试过了，但是CSS解决方案没有起作用，它只是适应了我的观点。这意味着通过添加媒体（gui）菜单图标是可见的大分辨率，因为我想但是probem是不可点击的。该元素上的Javascript不起作用（不会触发打开的菜单操作）。所以我得出的结论是它必须以不同的方式完成，而不是通过修改css @media。 – harry

所以行为比... ...我总是看到菜单图标，但它只在我低于73.2142857143em :)时打开，所以我必须缩小窗口才能看到菜单:) – harry

如果有人知道foundation5中的示例菜单总是崩溃，即使对于大分辨率，给我一个链接，我会自己检查它...不幸的是，我没有找到任何这种类型和框架版本的例子，谢谢 – harry

在Foundation 5.5.3中，可以通过更新foundation.css来更改topbar断点宽度。在下面的两个地方，我改变了断点9999px（或任何你想要的）：

更改媒体查询的宽度：

@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主题中）。

来源

2016-08-10 22:34:08 asonnenshine

引用此线程：[使用Topbar断点改变CSS]（http://foundation.zurb.com/forum/posts/1053-changing-topbar-breakpoint-using-css） – asonnenshine

foundation5菜单总是响应

回答

相关问题