Open In App

Foundation CSS Top Bar Sticky Navigation

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is a free and open-source front-end framework for developing flexible web designs. It’s one of the most powerful CSS frameworks, and it delivers a responsive grid, as well as HTML and CSS UI components, templates, and more, across all platforms. It also has several JavaScript Extension features that are optional. It also renders quickly on mobile devices thanks to the inclusion of the Fastclick.js utility.

A navigation bar is a technique to provide a way to have links in a horizontal position that helps us travel between different locations on the webpage. A navigation bar is usually at the top, although it can also be found on the left and right, or even at the bottom of the line in some design layouts. A top bar is a navigation bar at the top where we can add left and right sections in the top bar. 

We can make a top navigation bar using the top-bar class and can use the top-left and top-right classes to add content on the left and right sides of the navigation bar respectively. We can make the navigation bar sticky by adding the sticky class to it. In this scenario, the navigation bar is contained in a sticky container.

Foundation CSS Top Bar Sticky Navigation Used Attributes:

  • data-sticky-container: This attribute is added to the container which is meant to be a sticky container. This attribute doesn’t have any value.
  • data-sticky: This attribute is added to the container which is meant to be a sticky element. This attribute doesn’t have any value.

Foundation CSS Top Bar Sticky Navigation Used Classes:

  • top-bar: This class is used to make a title navigation bar at the top with a background color. 
  • top-bar-left: This class is used to add content or UI components on the left side of the top navigation bar.
  • top-bar-right: This class is used to add content or UI components on the right side of the top navigation bar.

Example 1: This code below demonstrates a sticky top navigation bar on a webpage.

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
    <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
    <link rel="stylesheet" href=
        crossorigin="anonymous">
    <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
    <link rel="stylesheet" href=
          crossorigin="anonymous">
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div data-sticky-container>
        <div class="top-bar" 
            data-sticky data-options="marginTop:0;">
            <div class="top-bar-left">
                <ul class="dropdown menu" data-dropdown-menu>
                    <li class="menu-text">GeeksforGeeks</li>
                    <li>
                        <a href="#">DSA</a>
                        <ul class="menu vertical">
                            <li><a href="#">One</a></li>
                            <li><a href="#">Two</a></li>
                            <li><a href="#">Three</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Java</a></li>
                    <li><a href="#">Python</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>
    </div>
  
    <div class='column row' id='root'>
        <h1 class="text-center" 
            style="color:green;">
            GeeksforGeeks
        </h1>
          
        <h3 class="text-center">
            Foundation CSS Top Bar Sticky Navigation
        </h3>
          
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks. This 
            is an example line. Welcome to GFG. This 
            is an example line. Hi Geeks!! Welcome to 
            GeeksForGeeks. This is an example line.
            Welcome to GFG. This is an example line. 
            Hi Geeks!! Welcome to GeeksForGeeks. This 
            is an example line. Welcome to GFG. This 
            is an example line. Hi Geeks!! Welcome 
            to GeeksForGeeks. This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks. This 
            is an example line. Welcome to GFG. This 
            is an example line. Hi Geeks!! Welcome to 
            GeeksForGeeks. This is an example line.
            Welcome to GFG. This is an example line. 
            Hi Geeks!! Welcome to GeeksForGeeks. This 
            is an example line. Welcome to GFG. This 
            is an example line. Hi Geeks!! Welcome 
            to GeeksForGeeks. This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks. This 
            is an example line. Welcome to GFG. This 
            is an example line. Hi Geeks!! Welcome to 
            GeeksForGeeks. This is an example line.
            Welcome to GFG. This is an example line. 
            Hi Geeks!! Welcome to GeeksForGeeks. This 
            is an example line. Welcome to GFG. This 
            is an example line. Hi Geeks!! Welcome 
            to GeeksForGeeks. This is an example line.
        </p>
  
    </div>
      
    <script>
        $(document).foundation();        
    </script>
</body>
  
</html>


Output:

 

Example 2: In the below code, the top bar stays sticky even after adding other features like Stacking, stacking is applied only for medium screen size.

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
    <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
    <link rel="stylesheet" href=
        crossorigin="anonymous">
          
    <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
    <link rel="stylesheet" href=
          crossorigin="anonymous">
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div data-sticky-container>
        <div class="top-bar  stacked-for-medium" 
            data-sticky data-options="marginTop:0;">
            <div class="top-bar-left">
                <ul class="dropdown menu" data-dropdown-menu>
                    <li class="menu-text">GeeksforGeeks</li>
                    <li>
                        <a href="#">DSA</a>
                        <ul class="menu vertical">
                            <li><a href="#">One</a></li>
                            <li><a href="#">Two</a></li>
                            <li><a href="#">Three</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Java</a></li>
                    <li><a href="#">Python</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>
    </div>
  
    <div class='column row' id='root'>
        <h1 class="text-center" 
            style="color:green;">
            GeeksforGeeks
        </h1>
          
        <h3 class="text-center">
            Foundation CSS Top Bar Sticky Navigation
        </h3>
          
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks. This
            is an example line. Welcome to GFG. This
            is an example line. Hi Geeks!! Welcome to
            GeeksForGeeks. This is an example line.
            Welcome to GFG. This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks. This
            is an example line. Welcome to GFG. This
            is an example line. Hi Geeks!! Welcome
            to GeeksForGeeks. This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks. This
            is an example line. Welcome to GFG. This
            is an example line. Hi Geeks!! Welcome to
            GeeksForGeeks. This is an example line.
            Welcome to GFG. This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks. This
            is an example line. Welcome to GFG. This
            is an example line. Hi Geeks!! Welcome
            to GeeksForGeeks. This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks. This
            is an example line. Welcome to GFG. This
            is an example line. Hi Geeks!! Welcome to
            GeeksForGeeks. This is an example line.
            Welcome to GFG. This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks. This
            is an example line. Welcome to GFG. This
            is an example line. Hi Geeks!! Welcome
            to GeeksForGeeks. This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks. This
            is an example line. Welcome to GFG. This
            is an example line. Hi Geeks!! Welcome to
            GeeksForGeeks. This is an example line.
            Welcome to GFG. This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks. This
            is an example line. Welcome to GFG. This
            is an example line. Hi Geeks!! Welcome
            to GeeksForGeeks. This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks. This
            is an example line. Welcome to GFG. This
            is an example line. Hi Geeks!! Welcome to
            GeeksForGeeks. This is an example line.
            Welcome to GFG. This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks. This
            is an example line. Welcome to GFG. This
            is an example line. Hi Geeks!! Welcome
            to GeeksForGeeks. This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks. This
            is an example line. Welcome to GFG. This
            is an example line. Hi Geeks!! Welcome to
            GeeksForGeeks. This is an example line.
            Welcome to GFG. This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks. This
            is an example line. Welcome to GFG. This
            is an example line. Hi Geeks!! Welcome
            to GeeksForGeeks. This is an example line.
        </p>
  
    </div>
  
    <script>
        $(document).foundation();       
    </script>
</body>
  
</html>


Output:

 

Reference: https://get.foundation/sites/docs/top-bar.html#sticky-navigation 



Last Updated : 01 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads