Foundation CSS Sticky Navigation

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.

Output:

👁 Image

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