What is the foundation top bar?

What is the foundation top bar?

The Foundation Top Bar gives you a great way to display a complex navigation bar on small, medium or large screens. The top bar is a pretty complex piece of magical UI goodness. We rely on many presentational classes to define its look and feel, and there’s a lot happening in the JS.

What are the different types of top bar in HTML?

Top Bar 1 Basics. A top bar ( .top-bar) can have two sections: a left-hand section ( .top-bar-left) and a right-hand section ( .top-bar-right ). 2 Advanced Layout. To set up a Responsive menu with toggle click trigger on mobile, first give your menu a unique ID. 3 Stacking. 4 Sticky Navigation.

How to make the top bar clickable on mobile navigation elements?

For example, data-options=”sticky_on: [small,large]” will be sticky on small and large, but NOT medium. You can now make the top bar clickable by adding a data-attribute to the nav element. Here’s an example: Foundation will show the parent link on mobile navigation.

How do you position the top bar on the page?

Positioning the Bar. The top bar is built with a single nav element with a class of top-bar. It will take on full-browser width by default. To make the top bar stay fixed as you scroll, wrap it in div class=”fixed”. If you want your navigation to be set to your grid width, wrap it in div class=”contain-to-grid”.

What are the different components of a top bar?

In addition to that you can learn tips and tricks and best practices for all of Foundation’s components. A top bar ( .top-bar) can have two sections: a left-hand section ( .top-bar-left) and a right-hand section ( .top-bar-right ).

How do I change the breakpoint of a top bar?

This breakpoint can be changed with the data-hide-for attribute in HTML, or the hideFor setting in JavaScript. By default, the two sections of a top bar will stack on top of each other on small screens. This can be changed by adding the class .stacked-for-medium or .stacked-for-large.

How do I wrap the top bar in a fixed grid?

You may use fixed and contain-to-grid together in the wrapping div ( div class=”contain-to-grid fixed ). You may also wrap your top bar in div class=”sticky” and put it anywhere within your markup.