This might be a little hard to explain, but here goes.
These URLS are not exactly the same.
http://navbartest1.bss.design/
http://navbartest1.bss.design/index.html
http://navbartest1.bss.design/index.html#skills
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 = $this.data("trigger-button");
$(cNavButton).trigger('click');
}
});
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.
Saj