Foundation CSS Top Bar Sticky Navigation

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= 

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> 

    <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->

    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css"

        crossorigin="anonymous"> 

    <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->

    <link rel="stylesheet" href= 

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" 

          crossorigin="anonymous"> 

    <!-- 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="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= 

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> 

    <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->

    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css"

        crossorigin="anonymous"> 

    <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->

    <link rel="stylesheet" href= 

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" 

          crossorigin="anonymous"> 

    <!-- 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="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

Article Tags :

CSS

Web Technologies

Foundation

Foundation-Navigation