- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Top Bar SASS Reference
Variables
You can change the styles of the components by using following SASS variables as listed in the table.
Sr.No. | Name & Description | Type | Default Value |
---|---|---|---|
1 |
$topbar-padding Sets padding for top bar. |
Number | 0.5em |
2 |
$topbar-background Background color is set for top bar. |
Color | $light-gray |
3 |
$topbar-link-color Sets color for link that is present inside the top bar menu. |
Color | $primary-color |
4 |
$topbar-input-width Set width in the top bar for <input> element. |
Number | 200px |
Mixins
You can use the mixins to build the CSS class structure for your components as listed in the table.
top-bar-container
Includes styles in the top bar container.
@include top-bar-container;
top-bar-stacked
Makes the top bar menu stacked.
@include top-bar-stacked;
foundation_navigation.htm
Advertisements