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.

Output:

👁 Image

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.

Output:

👁 Image

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