CodedLovely

I’m going to write about how to make a hamburger menu with Bootstrap collapse(close) when navigation links are clicked on a single page website.

Problem

While Bootstrap .navbar is very flexible, there is a problem when it’s used on a single page website. It doesn’t automatically collapse when you click an item if it’s a link to an anchor on the same page. I guess many Bootstrap users had experienced this, because it’s been a while since single page websites became a trend.

Solution

I wrote this simple JavaScript code. This code enables Bootstrap navbar collapse when nav-items linked to anchors in the same page are clicked.

See the Pen Bootstrap navbar collapse by Ai Kawasaki (@codedlovely) on CodePen.

I hope this solution helps someone builds their website someday.

See you