[Solved] Bootstrap Navbar Close Menu Issue

Bootstrap Studio Help
1

Hi there, i have an issue with the standard Navbar (and dropdown) component. When I click a link in mobile view the menu doesn’t close. That is pretty annoying. I found the following snippet, which does the job, but it also closes the first open accordion. How can i manage to close just the menu when an item or dropdown item is clicked. The menu shouldn’t close when the dropdown-item itself is clicked, to reach the items in the dropdown. Thanks for the help…

$(document).on('click',function(){
$('.collapse').collapse('hide');})
2

Well adding random JS is not the way to fix your problem. Without seeing your website or .bsdesign file, there’s little chance anyone here will be able to solve your problem. There are countless things that could have caused this. You may have found a bug in the software, or you’ve done something to your code to cause the dropdown to stop working.

The standard way to diagnose such problems is to work backwards. Assuming you’re backing up your site (you ARE backing up your site, right?) at some point I presume the Menu worked. So go back to the last version it was working, open it, and do a side-by-side comparison to the one that’s not working. Then start disabling the additions on the non-functional website one-by-one. Eventually you should find the culprit.

Another test is to just add a second navbar to the page, and see if that has the same problem. If not, you’ve got a code issue specific to just your first Navbar. If it affects both, it could also be a code issue, but something universal.

What happens if you start a new file from scratch and add a Navbar? Does the dropdown work? What happens if you start a new file and copy/paste the Navbar that’s not working into the new, blank website.

You’ve got to be like Sherlock Holmes when it comes to this stuff. Process of elimination. Just keep looking, disabling, until you figure out where things went haywire.

3

Hi, thank you for the extensive answer. I appreciate this.
I solved the issue in changing the selector in the script to this:

    $(document).on('click',function(){ 
    $('.navbar .collapse').collapse('hide');})

That way only the navbar is targeted.

It seems to be standard Bootstrap behavior to not close the nav when the anchor is on the same page.

1 Like
4

This may sound trivial, but make sure your nav items are closed in BSS when you’re testing these things in preview windows and live sites. Anything you leave open in BSS (nav dropdowns, accordion selections, etc.) will remain open in your live site as you have applied that setting in the app. You need to open them obviously, to update any information or links etc. in each dropdown or accordion section, etc., but you have to remember to close them as well. Not sure if that applies here, but thought I’d throw that in there in case it does.

5

I think I see what you’re saying. You’re talking about the standard Navbar component in mobile view. When you open the hamburger menu manually, clicking a top-level link that is assigned to an anchor tag on the same page will result in the hamburger menu staying open after one clicks the link. If the anchor link is in a dropdown (submenu), clicking a link assigned to an anchor tag WILL close dropdown, but not the hamburger menu.

It does seem that this is by design, and I’m not sure why. Could be something that the Bootstrap developers just overlooked, or perhaps they wanted it to work like this? It is an interesting problem. Not devastating, but I can see how it may be annoying if you want your page to always be in a “default” state after any type of clicking behavior.

I’d be interested in @kuligaposten’s thought’s on this?

6

@printninja

It has always been that way. The Nav menu in a Navbar does not trigger the Navbar collapse to close the Navbar when a Nav-link is clicked, for that you will need Javascript or jQuery.

If you create a new site and choose one of the “one page” templates you will see all of them has a short javasript file which deal with the navbar collapse when a nav-link is a #link on the same page.

7

Henry Ford (the original founder of Ford Automotive) was once called an “ignorant man” by a Chicago newspaper. He promptly sued the newspaper for libel, and during the court case, the newspaper’s attorneys were badgering him with questions about general knowledge like “Who was Benedict Arnold?” and "How many soldiers did the British send over to America to put down the Rebellion of 1776?” (as if a car company entrepreneur like Ford would ever need know such trivia!)

This greatly upset Ford, so he replied, "let me remind you that I have a row of electric push-buttons on my desk, and by pushing the right button, I can summon to my aid men who can answer ANY question I desire to ask concerning the business to which I am devoting most of my efforts. Now, will you kindly tell me, WHY I should clutter up my mind with general knowledge, for the purpose of being able to answer questions, when I have men around me who can supply any knowledge I require?”

Clearly Ford was a lot smarter than they gave him credit for, because what he understood was that it is more important to know how to obtain knowledge one needs, than to necessarily have it one’s own head.

Kuli, I think you would have been ideally suited to be on Ford’s electric push-button device because you clearly have BOTH of these skills!