Foundation 5 - 修改顶部栏链接以具有带 SASS 的底部边框

Question

我在 Foundation 5 网站上工作，需要自定义 .top-bar 导航菜单。我正在使用 Foundation 的 SASS 版本。

我在使用 SASS 修改菜单链接的活动和悬停样式时遇到困难。我已经更改了它们的颜色，但是我想在链接中添加一个 border-bottom 以指示 active/hover 状态。

默认情况下，Foundation 使用背景色来指示 active/hover，我不确定我需要编辑的确切位置以添加 border-bottom。正如我目前所拥有的那样，边框太低了，我需要它位于文本下方。

目前看起来是这样的：

需要在 border-bottom 上看起来像这样：

_settings.scss中的当前样式：

$topbar-bg-color: $white;
$topbar-bg: $topbar-bg-color;

// Height and margin
$topbar-height: rem-calc(65);


// Set the link colors and styles for top-level nav
$topbar-link-color: $asc-darkgray;
$topbar-link-color-hover: $lesson-orange;
$topbar-link-color-active: $lesson-orange;
$topbar-link-color-active-hover: $white;
$topbar-link-bg: $white;
$topbar-link-bg-color-hover: $white;
$topbar-link-bg-hover: $white;
$topbar-link-bg-active: $white;
$topbar-link-text-transform: uppercase;


// Divider Styles
$topbar-divider-border-bottom: solid 1px  scale-color($asc-lightgray, $lightness: 13%);
$topbar-divider-border-top: solid 1px scale-color($asc-lightgray, $lightness: -50%);

Answer 1

默认情况下，顶部栏中的 <a> 标签设置为 line-height 等于顶部栏的高度，以确保它们与中间对齐。

如果你想在菜单 link 上使用底部边框，并且仍然让它垂直对齐到顶部栏的中间，你只需要跨越 link 文本：

<li>
  <a href="#">
    <span class="link-border-bottom">border bottom link</span>
  </a>
</li>

并给你的 <span> 一个 class 和 border-bottom（如果你愿意，在 :hover 上）：

.link-border-bottom {
   &:hover {
     border-bottom: 1px solid orange; 
   }
}

或者如果您希望活动 link 带有下划线：

.active { 
  .link-border-bottom {
    border-bottom: 1px solid orange; 
  }
}

这是 Plunker 使用原版 CSS。

Foundation 5 - 修改顶部栏链接以具有带 SASS 的底部边框

Foundation 5 - modifying top-bar links to have a border-bottom with SASS

border

sass

navbar

zurb-foundation