Question

我确定已经问过这个但是我似乎无法找到一个没有使用SASS的例子。我只是有一个我正在使用的常规CSS文件。我希望汉堡菜单更改为更大尺寸的水平菜单。（@media only screen and (min-width: 64.063em)）我看过几篇帖子说要像这样更新settings.scss文件（http://foundation.zurb.com/forum/posts/1483-customize-topbar-breakpoint-in-scss）但我又一次我没有在这个项目中使用SASS。我似乎无法弄清楚是什么触发菜单从手机更改为桌面：媒体查询或javascript。

Answer 1

如果您想使用CSS，您可以在styles.css

之后的单独CSS文件（即：foundation.css）部分中覆盖Foundation CSS

Demo on Codeply

@media only screen and (max-width: 64.063em) {
    .top-bar {
      overflow: hidden;
      height: 2.8125rem;
      line-height: 2.8125rem;
      position: relative;
      background: #333;
      margin-bottom: 0;
    }

    .top-bar-section {
      left: 0;
      position: relative;
      width: auto;
      transition: left 300ms ease-out;
    }

    .top-bar-section ul {
      padding: 0;
      width: 100%;
      height: auto;
      display: block;
      font-size: 16px;
      margin: 0;
    }

    .top-bar .toggle-topbar.menu-icon {
      top: 50%;
      margin-top: -16px;
      display:block;
    }
    .top-bar .title-area {
      float: none;
    }
}

http://codeply.com/go/OtVVMn0n6V

Answer 2

如果您不想使用SASS，那么您最好更改foundation.css文件。

第1682行左右从

更改

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

到

@media only screen and (min-width: 40.063em) {

也在2006年左右，从

改变它

@media only screen and (min-width: 64.063em) {

要

#if !UNITY_WEBPLAYER
using System.IO.File;
#endif

在移动设备和平板电脑尺寸上使用移动菜单（汉堡）作为基础5站点

2 个答案: