Navbars require a wrapping.navbar with.navbar-expand {-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes. Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width. Use our spacing and flex utility classes for controlling spacing and alignment within navbars.

const hamburger = document.querySelector('.hamburger'); const navLink = document.querySelector('.nav__link'); hamburger.addEventListener('click', () => { navLink.classList.toggle('hide'); }); Here we added a click event to the hamburger and added the classList.toggle to the navLink.

First, copy the HTML codes and create a file named index.html and paste the Html codes and save it. Remember file extension must be.html. Second, copy the CSS codes and create a folder named styles. It’s good to arrange all the files in a good way. Then create a file named styles.css and paste the CSS codes.