Foundation CSS Top Bar Sass Reference
Last Updated :
01 Sep, 2022
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices. One such important component of the Foundation is Top Bar.
Top Bar in Foundation CSS helps to wrap the flexible menu components inside a container. The top bar in Foundation CSS contains two sections namely the right section and the left section. On the small screen devices, these two parts are stacked upon each other.
Variable Used:
| Variable-Name |
Description |
Type |
Value |
| $topbar-padding |
This variable is used to define the padding for the top bar. |
Number |
0.5rem
|
| $topbar-background |
This variable is used to define the background color for the top bar. |
Color |
$light-gray
|
| $topbar-submenu-background |
This variable is used to define the background color submenus within the top bar. |
Color |
$topbar-background
|
| $topbar-title-spacing |
This variable is used to define the spacing for the top bar title. |
Number |
0.5rem 1rem 0.5rem 0
|
| $topbar-input-width |
This variable is used to define the maximum width of <input> elements inside the top bar. |
Number |
200px |
| $topbar-unstack-breakpoint |
This variable is used to define the breakpoint at which the top bar switches from mobile to desktop view. |
Breakpoint |
medium
|
Example 1: In the below code, we will make use of the above variable to demonstrate the Top Bar.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body style="margin: 20px;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
A computer science portal for geeks
</h3>
</center>
<div class="top-bar"
style="background-color:rgb(143,253,167);">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text" style="color:green;">
GeeksforGeeks
</li>
<li>
<a href="#">Articles</a>
<ul class="menu vertical">
<li><a href="#">
HTML
</a></li>
<li><a href="#">
CSS
</a></li>
<li><a href="#">
js
</a></li>
<li><a href="#">
Bootstrap
</a></li>
<li><a href="#">
Foundation CSS
</a></li>
</ul>
</li>
<li><a href="#">
Practice
</a></li>
<li><a href="#">
Interview Experience
</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search"
placeholder="Search"></li>
<li><button type="button" class="button">
Search
</button></li>
</ul>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
SASS Code:
$topbar-padding :0.5rem ;
.top-bar{
padding:$topbar-padding ;
}
Compiled CSS Code:
.top-bar {
padding: 0.5rem;
}
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the Top Bar.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body style="margin: 20px;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
A computer science portal for geeks
</h3>
</center>
<div class="top-bar"
style="background-color:rgb(143,253,167);">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text" style="color:green;">
GeeksforGeeks
</li>
<li>
<a href="#">Articles</a>
<ul class="menu vertical">
<li><a href="#">
HTML
</a></li>
<li><a href="#">
CSS
</a></li>
<li><a href="#">
js
</a></li>
<li><a href="#">
Bootstrap
</a></li>
<li><a href="#">
Foundation CSS
</a></li>
</ul>
</li>
<li><a href="#">
Practice
</a></li>
<li><a href="#">
Interview Experience
</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search"
placeholder="Search"></li>
<li><button type="button" class="button">
Search
</button></li>
</ul>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
SASS Code:
$topbar-background: lightgrey;
.top-bar{
background-color:$topbar-background;
}
Compiled CSS Code:
.top-bar {
background-color: lightgrey;
}
Output:
Reference: https://get.foundation/sites/docs/top-bar.html#sass-reference
Share your thoughts in the comments
Please Login to comment...