Menu icon Foundation
Styling multiple unique instances of top-bar (or other components)

What is the best practice for styling two different instances of top-bar (or really any Foundation components)? I uncommented some lines in the _settings.scss file, but of course that only works globally for all instances of top-bar. I need to have two uniquely styled bars, and when I try to wrap top-bar options in a selector, all instances get overwritten.

For example, this doesn't work:

#main-nav {
$topbar-link-font-size: rem-calc(13);
}

top-bar scss "best practices"

What is the best practice for styling two different instances of top-bar (or really any Foundation components)? I uncommented some lines in the _settings.scss file, but of course that only works globally for all instances of top-bar. I need to have two uniquely styled bars, and when I try to wrap top-bar options in a selector, all instances get overwritten.

For example, this doesn't work:

#main-nav {
$topbar-link-font-size: rem-calc(13);
}

Nic Edwards almost 5 years ago

Have you tried using more specific selectors?

#main-nav.top-bar {
$topbar-link-font-size: rem-calc(13); 
}

Laura Holland almost 5 years ago

No, that doesn't seem to work.

Chris Peters almost 5 years ago

For top bar, you can only have the one global set of settings. You would need to pick one of the top bars and configure it manually using your own CSS overrides.

Some of the other Foundation elements are more generous in that you can use mixins to define how they should work. For example, this is for defining your own custom button class based on the Foundation button element (straight from the button docs):

// Using the available options
.custom-button-class {
  @include button(
    // $padding - Used to build padding for buttons Default: $button-med or rem-calc(12)
    $padding,
    // Primary color set in settings file. Default: $primary-color.
    $bg,
    // If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false.
    $radius,
    // We can set $full-width:true to remove side padding extend width. Default:false
    $full-width,
    // We can set $disabled:true to create a disabled transparent button. Default:false
    $disabled,
    // $is-input - <input>s and <button>s take on strange padding. We added this to help fix that. Default:false
    $is-input
  );
}

Rafi Benkual almost 5 years ago

You're on the right track, but putting variables inside selectors like that won't work. You just have to override the styles with IDs and maybe !important here and there.