Skip to content
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

Closed
xxxJimLxxx opened this issue Feb 26, 2014 · 10 comments
Closed

expanded mobile navbar doesn't collapse after clicking link #12852

xxxJimLxxx opened this issue Feb 26, 2014 · 10 comments
Labels

Comments

@xxxJimLxxx
Copy link

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?

@cvrebert
Copy link
Collaborator

Approximate duplicate of #10540, although I don't know of any compelling reason for the current "stays open after clicked" behavior.

@carasmo
Copy link

carasmo commented Feb 26, 2014

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');
  });
});

@carasmo
Copy link

carasmo commented Feb 26, 2014

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.

@cvrebert cvrebert added the js label Feb 26, 2014
@xxxJimLxxx
Copy link
Author

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")

@cvrebert cvrebert changed the title Fixed-to-top navbar in mobile view expanded mobile navbar doesn't collapse after clicking link Apr 7, 2014
@kevinknelson
Copy link

@xxxJimLxxx, the below code will only trigger when the menu is already "in" (expanded). That will hopefully eliminate the weirdness you reported:

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});

@xxxJimLxxx
Copy link
Author

@kevinknelson: Tested and works beautifully!

You are the guru! :-)

@Hardcoredevs
Copy link

Here is what helps me out in my company's website -
hardcoredevs.com

  //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 :)

@pisaacs
Copy link

pisaacs commented Oct 18, 2014

@kevinknelson small tweak to your snippet to allow collapse of submenus (dropdown-toggle) within the nav (otherwise clicking on a dropdown-toggle won't collpase):

$(document).on('click','.navbar-collapse.in',function(e) {

    if( $(e.target).is('a') && ( $(e.target).attr('class') != 'dropdown-toggle' ) ) {
        $(this).collapse('hide');
    }

});

@shamim71
Copy link

shamim71 commented Nov 3, 2014

Answer from @kevinknelson doesn't work when menu contains sub menu. However the answer from @pisaacs works. Thanks guys

@twbs twbs locked and limited conversation to collaborators Nov 3, 2014
@cvrebert
Copy link
Collaborator

X-Ref: foundation/foundation-sites#5409

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

7 participants