Collapse Nav Bar on single page on mobile & scroll

Wappler General How To
#1

Issue I am having is on a single page site, the navbar on the mobile does not collapse with the #link any ideas on the best way to do this.

Additionally on the mobile it over scrolls on the link.

here is the site https://diversemechanical.com.au/new-index.html

If you click any of the links you will see what I mean.
Thanks in advance

#2

For the PWA Boilerplate I have used
// collapse mobile naviagtion on click

$('.navbar-nav>a').on('click', function () {

    $('.navbar-collapse').collapse('hide');

});

A lot of other usefull features can be found:

#3

ok thanks for that @ben, but where would that code get inserted into my existing site ?

#4

Tried in 3 different browsers, I do npt have access to the site.

image
image880×604 28.5 KB

#5

If you want to see an example, go to

In index.html, line #90 you will see a link to app.js. Then when you click on the js folder, you will see app.js. Open it and you will see the code.

#7

Ah just take the s off https it currently running on an internal ssl