-
-
Notifications
You must be signed in to change notification settings - Fork 78.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
expanded mobile navbar doesn't collapse after clicking link #12852
Comments
Approximate duplicate of #10540, although I don't know of any compelling reason for the current "stays open after clicked" behavior. |
http://stackoverflow.com/questions/21203111/bootstrap-3-collapsed-menu-doesnt-close-on-click $(document).ready(function () {
$(".navbar-nav li a").click(function(event) {
$(".navbar-collapse").collapse('hide');
});
}); |
If you see the requests on StackOverflow some want it open some want it closed. I would say that the fixed version should close, since it will cover up anchor links. |
I've put the following at the end of my document (after bootstrap.min.js): $(document).ready(function () {
$(".navbar-nav li.trigger-collapse a").click(function(event) {
$(".navbar-collapse").collapse('hide');
});
}); (I'm only targeting particular links.) This auto-collapses the menu beautifully in mobile view. However, there is a strange effect at desktop resolution where the first click on a sub-menu item causes the menu to expand and contract quickly. This happens in multiple browsers (Firefox and Internet Explorer). See http://www.eng.ox.ac.uk/hems/hems.html. (To reproduce: In a desktop browser load the page and then click on "Partners > University of Oxford") |
@xxxJimLxxx, the below code will only trigger when the menu is already "in" (expanded). That will hopefully eliminate the weirdness you reported:
|
@kevinknelson: Tested and works beautifully! You are the guru! :-) |
Here is what helps me out in my company's website - //Hamburger menu toggle
$(".navbar-nav li a").click(function (event) {
// check if window is small enough so dropdown is created
var toggle = $(".navbar-toggle").is(":visible");
if (toggle) {
$(".navbar-collapse").collapse('hide');
}
}); If anyone still having issues, hope this will definitely help them out, thanks :) |
@kevinknelson small tweak to your snippet to allow collapse of submenus ( $(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && ( $(e.target).attr('class') != 'dropdown-toggle' ) ) {
$(this).collapse('hide');
}
}); |
Answer from @kevinknelson doesn't work when menu contains sub menu. However the answer from @pisaacs works. Thanks guys |
The Fixed-to-top navbar when used in mobile view (i.e. clicking a link) does not collapse afterwards. This means that the menu remains expanded and therefore covers the content.
See: http://www.eng.ox.ac.uk/hems/hems.html
Is it possible to have the menu collapse down after clicking a hyperlink?
The text was updated successfully, but these errors were encountered: