Now, let's say we just put the navigation bar at the very top of our page and outside of the Foundation framework. This will cause the navigation bar to take 100 percent width of the browser window and it is the first element on the page, as shown in the following diagram:
If you want to make the navbar stay at the top of the user's screen while scrolling, you can create a "sticky" navigation bar (or any other element you want) by simply wrapping the desired element in a <div> tag with a class of "fixed" applied. Have a look at the following code example:
<div class="fixed">
<nav class="top-bar" data-topbar>
*** Menu ul's would be here ***
</nav>
</div>We can also set the navbar to not be 100 percent of the window, as shown in the following figure:
We do this by adding a "contain-to-grid" class to the div that already has the "fixed" class on it, as shown in the following code:
<div class="fixed contain-to-grid"> <nav class=...