Foundation CSS Sticky Navigation

Last Updated : 21 Jun, 2022

Foundation CSS is a free and open-source front-end framework that aids in the creation of flexible web designs. It’s one of the most powerful CSS frameworks, and it works across all devices, delivering a responsive grid as well as HTML and CSS UI components, templates, and more. It also includes some optional JavaScript Extensions features. Because of the inclusion of the Fastclick.js utility, it also delivers quick rendering on mobile devices.

The Navigation Bar is the way to add a way to have links in a horizontal orientation which helps us to navigate between different locations on the webpage. Generally, a navigation bar is at the top, but in some design layouts, they are kept on the left and right or even at the bottom of the line.

Foundation CSS Sticky Navigation can be utilized by adding the .sticky class to the navigation bar, which will enable us to add a sticky navbar. The navigation bar is encased in a sticky container in this case. Here a sticky navbar is created by adding a data-sticky attribute to the .title-bar class.

Foundation CSS Navigation Bar Classes:

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

Foundation CSS Navigation Bar 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.

Syntax:

<div data-sticky-container>
  <div class="title-bar" data-sticky data-options="marginTop:0;">
    <div class="title-bar-left"> Content </div>
    <div class="title-bar-right"> Content </div>
  </div>
</div>

Example: This example demonstrates a sticky navigation bar on a webpage using Foundation CSS.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
     
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
 
<body>
    <div data-sticky-container>
        <div class="title-bar" data-sticky 
             data-options="marginTop:0;">
            <div class="title-bar-left"> 
                <span class="title-bar-title">
                    GeeksforGeeks
                </span> 
            </div>
            <div class="title-bar-right">
                <ul class="dropdown menu align-right" data-dropdown-menu>
                    <li> 
                        <a>DSA</a>
                        <ul class="menu">
                            <li>
                                <a href="#">Item 1A</a>
                            </li>
                            <li> 
                                <a href="#">Item 1B</a>
                            </li>
                            <li>
                                <a href="#">Item 1C</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Algorithms</a>
                        <ul class="menu">
                            <li>
                                <a href="#">Item 2A</a>
                            </li>
                            <li>
                                <a href="#">Item 2B</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Java</a>
                    </li>
                    <li>
                        <a href="#">C++</a>
                    </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>