About This Course

In this lesson, you will create a responsive navbar. To get along quickly, you need basic HTML, CSS, and JavaScript knowledge.

Modules

Declare Navbar Structure with HTML

First, we will use HTML to declare our project structure; we will use the header tag to wrap all the declarations.

0 / 3 Steps

Steps Expand Icon

Introduction to Responsive Navbar

Declare the Header tag with Dropdown Menu

Adding more Menus options

Style Navbar with CSS

At some point, we will add the CSS styling by making sure it appears nicely on almost every screen sizes.

0 / 2 Steps

Steps Expand Icon

Custom Navbar for Mobile Views

Custom Navbar for Larger Screens

Add Javascript Functionality

And finally, we will add the JavaScript functions that will respond to user clicks on small and big screen.

0 / 4 Steps

Steps Expand Icon

Introduction to Adding Javascript Function to Navbar

Adding Event Bubbling to Navbar

Toggle Nav with Header ID

Hide Dropdown when User Clicks