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>
预先感谢您的帮助。
答
如果您添加了css,帮助会更容易,但您只需将媒体查询值更改为希望菜单响应的宽度,或者将现有菜单css替换为css在媒体查询中,所以它总是会有反应
答
在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主题中)。
+0
引用此线程:[使用Topbar断点改变CSS](http://foundation.zurb.com/forum/posts/1053-changing-topbar-breakpoint-using-css) – asonnenshine
该CSS是一个未经修改的基金会css(我没有把它包括为它太大,它不会很聪明)。无论如何,你提到的两件事我都试过了,但是CSS解决方案没有起作用,它只是适应了我的观点。这意味着通过添加媒体(gui)菜单图标是可见的大分辨率,因为我想但是probem是不可点击的。该元素上的Javascript不起作用(不会触发打开的菜单操作)。所以我得出的结论是它必须以不同的方式完成,而不是通过修改css @media。 – harry
所以行为比... ...我总是看到菜单图标,但它只在我低于73.2142857143em :)时打开,所以我必须缩小窗口才能看到菜单:) – harry
如果有人知道foundation5中的示例菜单总是崩溃,即使对于大分辨率,给我一个链接,我会自己检查它...不幸的是,我没有找到任何这种类型和框架版本的例子,谢谢 – harry