Book Image

Learning Zurb Foundation

By : Kevin Horek
Book Image

Learning Zurb Foundation

By: Kevin Horek

Overview of this book

<p>Responsive web design is the next big thing in web design right now. It allows you to control and adapt to the user experience across a variety of devices, screens, and resolutions. Foundation is one of the most well-known responsive frameworks available, and allows you to speed up the prototyping, designing, and theming of your web project; as well as allowing you to create your own custom themes to suit your needs. It makes your life easier by giving you a grid, elements, and JavaScript functions that are responsive and easily customized to work with any web or mobile project that arises.</p> <p>This book starts off with teaching you the basics, and gradually moves on to cover the most advanced parts of this amazing framework. You will learn how to use Foundation to prototype, design, and theme your projects as well as discover how to use the framework with any programming language or content management system.</p>
Table of Contents (17 chapters)
Learning Zurb Foundation
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Magellan sticky navigation


Let's start off with something that is quite popular and can make your site ride the navigation trends of the Web. This type of navigation is called sticky navigation; in Foundation they call this component Magellan Sticky Nav. This type of navigation is when you have a navigation bar below some elements on your site and when you vertically scroll past this menu the menu sticks to the top of the screen and stays with you until you get to the bottom of the page. If you scroll back up past where the sticky nav was, it will unstick and sit back on the page. Do not worry if this does not quite make sense yet, we will be trying this together in a second. Remember you can follow along with me at https://codio.com/kevinhorek/Learning-Zurb-Foundation/ or on GitHub at https://github.com/kevinhorek.

On or around line 49, let's add the following code:

  <div class="row">
    <div class="small-12 medium-12 large-12 columns">
    <div data-magellan-expedition=...