From the course: Bootstrap 3 Essential Training
Unlock the full course today
Join today to access over 22,700 courses taught by industry experts or purchase this course individually.
Collapsing your navigation - Bootstrap Tutorial
From the course: Bootstrap 3 Essential Training
Collapsing your navigation
- When you view a navigation component on an access breakpoint, that means a breakpoint that is smaller than 768 pixels, the navigation is going to stack up on top of one another like this. So whenever we get to that breakpoint, you can see that it stacks up. In those instances, it's common to display something called a Hamburger menu that expands to display the complete list. Now Bootstrap offers some classes to be able to take care of that. So I have simplified my navigation from the previous movie just a bit. I don't like to show code that is overly complex especially when I'm already showing you something that is in itself quite complex. So to collapse the menu into a hamburger, the first step is to group our navigation that will be collapsed by wrapping it with a div. So I'll take this unordered list right here and I'm going to create an additional div, and this is going to have a class of collapse. And let's go ahead and paste that navigation there and align it a little bit…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.