CODEWITHSUNDEEP
sasszurb-foundationbordernavbar
tdc
tdc

Reputation: 5464

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

I'm working on a Foundation 5 site and need to customize the .top-bar navigation menu. I am using the SASS version of Foundation.

I'm having difficulty modifying the active and hover styles for the menu links using SASS. I've changed their colors, however I want to add a border-bottom to the links to indicate active/hover state.

By default, Foundation uses background color for indicating active/hover, and I'm not sure exactly where I need to edit to add border-bottom. As I currently have it, the border is far too low, I need it to be underneath the text.

Currently Looks like this:

enter image description here

Need it to look like this with border-bottom on :

enter image description here

current styles in _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%);

Upvotes: 0

Views: 993

Answers (1)

timsvoice
timsvoice

Reputation: 367

By default the <a> tags in the top-bar are set with a line-height equal to the height of the top-bar to ensure they are aligned to the middle.

If you want to use border bottom on a menu link and still have it vertically aligned to the middle of the top-bar you just need to span the link text:

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

and give your <span> an class with border-bottom (on :hover if you want):

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

or if you want the active link to be underlined:

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

Here's a Plunker using vanilla CSS.

Upvotes: 1

Related Questions