skills logo

Explore

instinctHublogo

Powered by instinctHub

© 2025 All right reserved

  • Privacy Policy
  • Terms & Condition
  1. Courses
  3. Creating Responsive Navbar with HTML, CSS and Javascript

Creating Responsive Navbar with HTML, CSS and Javascript

skills

BEGINNER

No Project

Updated 1 year ago

About

Modules

M:1

Function to capture the scroll event whenever user scrolls

3 Lessons

|

13 Min

In this lesson, you will learn how to add Javascript functions to your webpage which will toggle colours whenever the user scrolls.

  • Project structure

    2:34

  • Copying the source code

    7:46

  • Linking assets

    3:36

M:2

Style Navbar with CSS

2 Lessons

|

32 Min

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

  • Custom Navbar for Mobile Views

    18:18

  • Custom Navbar for Larger Screens

    14:04

M:3

Add Javascript Functionality

4 Lessons

|

20 Min

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

  • Introduction to Adding Javascript Function to Navbar

    0:53

  • Adding Event Bubbling to Navbar

    7:08

  • Toggle Nav with Header ID

    6:47

  • Hide Dropdown when User Clicks

    5:24

M:4

Declare Navbar Structure with HTML

3 Lessons

|

16 Min

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

  • Introduction to Responsive Navbar

    1:09

  • Declare the Header tag with Dropdown Menu

    9:21

  • Adding more Menus options

    6:29

Preview this course

This course includes:

  • 1 Hr, 23 Min on-demand video
  • Lifetime access
  • Milestone budges