Collapsed navbar won't close with same page anchors

The site I am working on has a long home page with several same page anchors (id=“contact”). When in mobile view, the collapsed menu works fine on the first click to an anchor. However, when the hamburger menu is expanded for the second time, it remains open even after clicking another same page anchor link; the menu is then blocking page content. When clicking a link to a separate page, everything works as expected with the menu retracting upon link selection.

Based upon internet research, it appears to be a somewhat common problem since a new page is not being selected and loaded. I have tried a number of the methods provided in search results, but nothing seems to work.

Am I missing something? Any suggestions for this?

FWIW: I am able to reproduce the same results using any of the basic BSS built in templates and all three of the built in navbars display the same behavior.

I am new to Bootstrap and Bootstrap Studio so any help is much appreciated. Previously worked with Dreamweaver CS3, Serif WebPlus, WordPress.

Since I can reproduce this using just the core BSS components, wouldn’t this be considered a bug?

I have created a test website using only the built-in components from BSS.

  1. Reduce browser to mobile width.
  2. Click the hamburger menu and select ‘Skills’ or ‘Website’ which are same page anchors.
  3. Expanded menu will close after selection.
  4. Open the hamburger menu again and select the other link (Skills or Website)
  5. The menu will stay open, blocking page content until the page is refreshed or the hamburger button is clicked again.
  6. Notice the link to ‘Hire Me’ opens a new page and the menu retracts as expected.

This might be a little hard to explain, but here goes.

These URLS are not exactly the same.

The first URL, while it is the index.html page, it is not the same URL as the second or third ones therefore it will load the "new" site URL.

The second URL and third URL while not exactly the same URL they are the same page but the third URL states it's just a section within the current page so stay on the page and scroll to the section.

However, the third URL is different when in reverse when going to the second URL because it's not going to a section within the current page so it loads a "new" site URL.

New site URLs are what causes the Navbar to "not collapse" but to be reloaded which by default is a collapsed state.

So to get around this for myself what I have done is created a Javascript function that when I click on a Navbar that links to same page sections that it will re-click the hamburger menu to cause it to collapse.

Here is the Javascript that I'll share with you :)

$("body").on("click", "[data-trigger-button]", function() {
    if (window.matchMedia("(max-width: 767px)").matches) {
        var $this = $(this),
            cNavButton = $"trigger-button");

What you will have to now do is add a Data- attribute to each of your inner page links that you want this to apply to. You can do that in the Attributes pane by clicking on the HTML panes tab (bottom/middle/left) then on the Attribute pane (below the HTML pane). Then click the Plus icon to add a new attribute field.

In the first box of the new field add (without quotes) "data-trigger-button" then in the second box type in (without quotes) "#toggler" or whatever you want to word it after the "#". Then select the Navbars BUTTON element in the HTML pane and then in the Attribute pane type in (without quotes) "toggler" or whatever word your used in the Attribute pane in the second box without the "#".

So it should end up looking something like

< a class="nav-link active" href="index.html#skills" data-trigger-button="#toggler">Skills</a>

And button like

< button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" id="toggler" aria-expanded="false">....

I have verified that this will work on your site from what I can test with.

You can also change the max-width in the JS code if you want, but looking at your Navbar, you can also change when the Navbar expands to "MD and Above" rather that LG.


Just so it's clear in case you weren't aware (and in case you really meant that there are several anchors with ID="Contact") You need to make sure that there is only 1instance of any one ID on a page so if you have multiple ID's with the name Contact in them, that will mess up lots of things including the functionality of the menu. If you only meant that you had several anchors and was just using the Contact one as an example, and they are indeed all differently named, then .... nevermind :P


Thank you for taking the time to work on this issue. I will give your suggestion a try and let you know the results.


I should have been explained my situation better. Each ID on the page is unique and I only chose one, “id=contact” to display the anchor formatting I was using. But I do appreciate your concern and taking the time to offer your advice.

Hi Saj,

After some trial and error, I was able to get your solution to work. I wasn't sure where to place your Javascript.

I exported the project without minifying and added your JavaScript via notepad to the end of jquery.min.js. Then I opened the index page from the exported files and all worked as you outlined; after clicking an anchor link, the menu collapsed (reloaded) nicely!

Is that where you intended your code to be placed? As mentioned, I’m new to bootstrap and do not have much experience with JavaScript.

If that is the right procedure, then I assume I am unable to export the project using minify JavaScript and CSS since I cannot modify the locked js files within the project. Am I correct?

BTW, I followed the same method on my published website, uploaded the exported files and I am seeing the desired action – works great!

Thanks again for your assistance.

Create yourself a custom JS file for adding any scripts to it and make sure it's the top file so that it's the first one read after the main locked files and that should get things rolling for you Phil. If you add them to the default files you will end up having to do that every time you export which can be tedious. Best practice is to create a new js file to put custom scripts into.

Excellent suggestion, Jo. I just created a file named “1-custom.js”, placed Saj’s JavaScript in there, dragged it into the project UI and everything works great as before.

You’re right – that will save a great deal of time going forward. Thanks!

Shame there are no Kudos or Likes on this forum - you guys deserve some.

Glad it's working for you, have fun with it! :)

Glad we were able to help you out :)