基础5中的顶栏断点

I tried the break point in 5.5.2 and was pretty easily accomplished just by changing the width in 3 instances as follow:

我尝试了5.5.2中的断点，只需更改3个实例中的宽度就可以轻松完成，如下所示：

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


@media only screen and (min-width: 64.063em) {
  .top-bar {
    background: #333333;
    *zoom: 1;
    overflow: visible;
  }

the only problem I'm facing is the main menu (parent link) of the drop down is not visible (once you click, it only shows the dropdown part not the main link) when it comes to toggle menu, unless you reach the actual break point ie. 40.063 em. Should I need to make any change in javascript?

我面临的唯一问题是下拉菜单的主菜单（父链接）不可见（一旦你点击，它只显示下拉部分而不是主链接）切换菜单，除非你达到实际断点即。 40.063 em。我应该在javascript中进行任何更改吗？

Thanks for helping me!!

谢谢你的帮助!!

1 个解决方案

#1

I've done a little more research and found the fix. All you have to do is go to [js/foundation/foundation.topbar.js] line number 368 change "show-for-small" to "show-for-medium-down".

我做了一点研究并找到了解决办法。您所要做的就是转到[js / foundation / foundation.topbar.js]第368行，将“show-for-small”更改为“show-for-medium-down”。

Following is the code for you:

以下是您的代码：

if (settings.mobile_show_parent_link == true && url) {
            $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5></li><li class="parent-link show-for-medium-down"><a class="parent-link js-generated" href="' + url + '">' + $link.html() +'</a></li>');
          } else {
            $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5>');
          }

Then at the very bottom of your html file, where you are calling other js files, call topbar.js by adding following line

然后在您调用其他js文件的html文件的最底部，通过添加以下行调用topbar.js

<script src="js/foundation/foundation.topbar.js"></script>

You can even make this work just by making the above mentioned change in js/foundation.min.js

您甚至可以通过在js / foundation.min.js中进行上述更改来完成此工作

#1