在我的foundation_and_overrides.scss ,我已将topbar-breakpoint更改为特定的px宽度。 我想在宽度小于断点时显示汉堡图标。

现在,它将删除菜单并将其留空,直到我点击$small-range为止。 我不确定在foundation_and_overrides.scss何处进行编辑,以在遇到新断点时显示汉堡图标/菜单。

SCSS

$topbar-breakpoint: 1225px; // Change to 9999px for always mobile layout
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})" !default;

的HTML

<div class="fixed header" style="border-bottom: 1px solid #000;">
  <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1><a href="/"><img src="/assets/logo.png" alt="" id="logo-image"></a></h1>
      </li>

      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
     </ul>

<section class="top-bar-section">
  <ul class="left">
    <li><a href='/programs'>Programs</li>
    <li><a href='/projects'>Projects</li>
  </ul>
</section>
</nav>
</div>

  ask by Walksalong translate from so

本文未有回复,本站智能推荐:

1回复

使用自定义CSS更改Foundation的topbar断点?

我正在尝试从Bootstrap迁移到Foundation,但是在尝试确定如何准确更改Foundation顶部栏的断点时遇到问题。 我使用的是CDN版本的Foundation的最小CSS,因此我无权访问设置SASS文件来对此进行修改。 有没有快速的CSS替代解决方法? 到目前为止,我在这里和
2回复

Foundation 6>标题栏和菜单图标自定义

我是Foundation的新手,我开始使用Foundation 6,对旧版本一无所知。 我有一个响应式顶部栏,当屏幕很小时,该栏变为标题栏。 如果您熟悉Foundation,您将知道标题栏默认情况下具有菜单图标,该菜单图标使您可以在单击时从顶部栏中切换内容,并在再次单击时将其切换回原
2回复

Google自定义搜索基础5 Zurb显示问题

我正在使用Zurb的Foundation 5,并且关于Google自定义搜索引擎出现显示问题。 搜索整个互联网,但未找到任何线索。 有人可以帮忙吗?
3回复

Google自定义搜索在Foundation 3中显示问题

我正在尝试添加Google自定义搜索,但它仍然显示不正确。 按钮上的搜索图标丢失,看起来好像文本框的底部被切断了。 新成员,所以我无法发布图像。 码 没有真正的CSS可以说...... 该脚本不受Google生成的代码的影响。 编辑现在发现这是问题所在。 G
1回复

菜单“汉堡”图标不会出现,但会出现文本

我正在使用Foundation在我的网站的顶部栏上工作,除菜单图标未出现以外,其他一切似乎都正常运行,我遵循了Foundation文档,但仍然遇到问题。 我所拥有的看起来像这样: “菜单”确实出现并正常工作,但是菜单图标从不出现。 如果删除“菜单”,则什么也不会出现,并且根本无法使用
1回复

Zurb Foundation 5中带有SASS Mixins的自定义按钮组无法正确显示

我想使用其自定义的SCSS mixins在Foundation的按钮栏中创建一个圆形的按钮组。 所以我的标记看起来像这样: <ul class="contextualButtons"> <li><a class="button
5回复

轨道幻灯片放映自定义下一个上一页按钮链接左右箭头

我正在使用zurb基础轨道幻灯片演示。 页面左右边缘上的下一个和上一个按钮或链接是默认的黑色三角形。 请查看此测试页: http://www.endsnore.com/_test1b/index.aspx 如何自定义下一个和上一个按钮或链接? 如何添加自己的箭头代码:‹和›或添
1回复

自定义按钮组

我想使用基础按钮组并拥有自己的样式,但是我不知道如何设置自定义样式的敌人 我有这个: 如何为被单击的按钮设置“活动”按钮样式?