Hamburger menu not triggering menu

Hi everyone!
I’m a little new to BS so please bear with me-- I seem to have broken the hamburger menu from triggering the menu items on the mobile version of my site.
I’ve uploaded a screenshot of the html tree.

Also, I’ll put a link to the temporary published site: see here (

For reference, using Bootstrap Studio v5.5.4 but my website is using Bootstrap 4.

Any help would be much appreciated :slight_smile:

You have TypeError in your in your javascript and that is because your navbar missing the ID=mainNav

1 Like

Hi again, so sorry to bother but I added the mainNav ID to my NavBar and while it did seem to pick up some stylistic elements (a black background and a few other things applied as soon as I gave it the ID) it seems that clicking the hamburger still isn’t triggering the menu.

I published the edited version to the same link, is there any way you could take a look and see if I did it wrong?

You must change the order of your javascripts the particle.js must come before you call it.
Add this to your custom css and change the backgrund color

#mainNav.navbar-shrink {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid hsla(0,0%,100%,.3);
background: #000

and change the name of your image tecmo-bowl-ad.jpg remove the -ad

1 Like

Thanks for getting back. I changed the asset name and added the code snippet to the navbar’s style sheet. I also change the ordering of the sheets so the particles.js would load first. Can’t figure out why the menu is still not opening when clicked, but I’ll keep at it. I’m sure I just made a typo somewhere. Thanks so much for all your help :slight_smile:

@media screen and (min-width: 300px) and (max-width:980px) {
    #navcol-1,.nav-item {


1 Like

I’m so sorry I am not an expert in this…
I deleted the media query but am not sure what else might be causing the issue. Still looking into it :confused:

I would probably do something similar to this…

<nav class="navbar navbar-light navbar-expand-md navigation-clean navbar-inverse navbar-fixed-top" id="mainNav" style="background: rgba(0,0,0,0);border-style: none;">
            <div class="container-fluid mt-3">
                <a class="navbar-brand" id="brand" href="/index.html">My Name</a>
                <button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navcol-1">
                    <ul class="navbar-nav ml-auto" id="mainNav" style="margin-top: 13px;background: rgba(0,0,0,0);border-style: none;">
                        <li class="nav-item"><a class="nav-link" uk-scroll="offset:50" href="/index.html">Home </a></li>
                        <li class="nav-item"><a class="nav-link" uk-scroll="offset:100" href="#mainTitle">ABOUT</a></li>
                        <li class="nav-item"><a class="nav-link" uk-scroll="offset:100" href="#goodscroll">PROJECTS</a></li>
                        <li class="nav-item" id="skillsItem"><a class="nav-link" uk-scroll="offset:50" href="#skills">SKILLS</a></li>
1 Like

Your problem is all your javascript. Your web page has 200 lines of HTML and 22000 lines of javascript.
Some scripts are loaded more than once.


Embarrassing but true.
I went in and deleted most of the JS files, going through and checking when the hamburger menu would work. I found the culprit and am happy to say it works now :grinning:

Was definitely an issue of too much JS loaded on the site.
Thanks so much for being willing to help and staying patient, I know it must have been annoying to see all the random stuff I had added in on the website. It’s my first time actually making something tangible with BSS so hey definitely a good learning experience.

@Kuligaposten should have a special title after his name… “Invaluable Member.”


I think you mean “Old Amateur”

How about “Wise Old Member”