2

I'm doing a fixed top navbar using Bootstrap 3 with mobile first approach.

I'm stuck with an issue when I view on a large screen (eg. menu is not collapsed) and I click on one of the menu links, a horizontal scroll is appearing on the menu.

The issue seems to be happening after I added data-toggle="collapse" data-target=".navbar-collapse" on the navbar-collapsable div or also I've tried it with the anchor links too, in order to add the auto close when clicking on a link in Mobile View (small screen).

When I'm using it as Mobile view (small display) it works perfectly and has the auto close when clicking a link which I require.

An example is saved in this plunker which you can see.

Anyone can help how to remove that scroll please?

Zanon
  • 29,231
  • 20
  • 113
  • 126
Clayton Lautier
  • 204
  • 2
  • 6
  • 1
    I'd say you shouldn't add `data-toggle="collapse" data-target=".navbar-collapse"` like that and should add a custom click handler instead. – cvrebert Sep 02 '14 at 23:17
  • http://stackoverflow.com/questions/21203111/bootstrap-3-collapsed-menu-doesnt-close-on-click – Christina Sep 03 '14 at 06:34

1 Answers1

2

Thanks for your feedback.

as @cvrebert said, I removed data-toggle="collapse" data-target=".navbar-collapse and instead I've added the following js:

$(document).on('click.nav', '.navbar-collapse', function (e) { if ($(".navbar-header button").is(":visible")) { $(this).collapse('hide'); } });

This will check that the menu button is visible or not, if its visible it will close the menu.

Thanks.

Clayton Lautier
  • 204
  • 2
  • 6