Login Register

Kayzen

Top Bar

assets/modules/objects/top-bar

Files

  • _top-bar.scss
  • README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/objects/top-bar

Module Overview

  • Name: top-bar
  • Modifiers: fixed
  • Components: item, nav

Examples

<div class="top-bar">
    <div class="container">
        <div class="row-block">
            ...
        </div>
    </div>
</div>

Fixed Top Bar

<div class="top-bar-fixed">
    ...
</div>

Or...

@include top-bar((
    'fixed' : true
));

Customizing

The Top Bar module can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name Default Value Description
output-JSON true This allows the config to be accessed in the JavaScript.
height 60px The height of the module.
background color('greyscale', 'grey-6') This module's main background.
padding 1em 0 The module's padding.
link-color color('greyscale', 'grey-3') The color for links when inside the top-bar module.
link-hover-color color('greyscale', 'white') The color for hovered links that are inside the top-bar module.
z-index 6 The z-index for the module.
fixed false If enabled, the top-bar will remain fixed when scrolling.

To change one of the above values, pass your new value(s) to the top-bar() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include top-bar((
    'height' : 50px,
    'fixed'  : true
));