0

I am trying to get my navbar to auto collapse on click. Specifically when it is on a mobile device. I do not see why the below code will not work but I believe I maybe have the '.nav navbar-toggle a' wrong.

HTML

<div class="navbar navbar-fixed-top navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
         <a class="navbar-brand" href="#"></a>
    </div>
    <div class="collapse navbar-collapse" id="close">
      <ul class="nav navbar-nav">
        <li class="navtext"><a href="#about">ABOUT</a></li>
        <li class="navtext"><a href="#services">SERVICES</a></li>
        <li class="navtext"><a href="#work">WORK</a></li>
        <li class="navtext"><a href="#contact">CONTACT</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

Java script (I added this code to the end of bootstrap.js)

function close_toggle() {
if ($(window).width() <= 768) {
  $('.nav.navbar-nav a').on('click', function(){
      $("#close").click();
  });
}
else {
 $('.nav.navbar-nav a').off('click');
}
}
close_toggle();

$(window).resize(close_toggle);

The website is speak-design.com

Thank to Hide Twitter Bootstrap navbar on click

Community
  • 1
  • 1
SpeakDesign
  • 43
  • 2
  • 3
    We would all love lots of things, but we don't give work for free here. – Daedalus Dec 26 '13 at 22:06
  • wow, i dont understand what your saying... Are you suggesting I hire a developer to get my nav bar to auto collapse on click? – SpeakDesign Dec 26 '13 at 22:21
  • 1
    Show us what you've tried. You're getting people to solve your problem for free, so the least you can do is give us that.. Linking to your website isn't good enough, as then you expect us to debug that.. again, for free. I suggest you check out http://stackoverflow.com/help/how-to-ask – Daedalus Dec 26 '13 at 22:26
  • 1
    I should mention that all this information must be in the question itself; links die, and the goal of this site is to provide a collection of useful information. If the links and examples die, this question is useless to future visitors of the site who have the same problem. – Daedalus Dec 26 '13 at 22:28
  • Thanks for the education @Daedalus. I assumed its easier to just link my website but I now see the wisdom of including it all in the post. I hope what I have now is sufficient. – SpeakDesign Dec 26 '13 at 22:44
  • 1
    `('.nav navbar-nav a')` should be `('.nav.navbar-nav a')` see: http://stackoverflow.com/questions/5796654/css-rule-to-apply-only-if-element-has-both-classes and you should apply your click for closing on `.navbar-collapse` if i understand your question well – Bass Jobsen Dec 26 '13 at 22:49

2 Answers2

2

I commented first:

('.nav navbar-nav a') should be ('.nav.navbar-nav a') see: CSS rule to apply only if element has BOTH classes and you should apply your click for closing on .navbar-collapse if i understand your question well

When i test the above i think i should work with the code shown below.

<script>
function close_toggle() {
if ($(window).width() <= 768) {
  $('.nav.navbar-nav a').on('click', function(){
      $('.navbar-collapse').collapse('hide');
  });
}
else {
 $('.nav.navbar-nav a').off('click');
}
}
close_toggle();

$(window).resize(close_toggle); 
</script>

NB i think .collapse('hide'); make more sense (more readable) than doing click although the effect will be the same maybe.

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
0

Its already doing it. Make sure you added the viewport in your metatags 

<meta name="viewport" content="initial-scale=1">

Reference

Jeffrey Nicholson Carré
  • 2,950
  • 1
  • 26
  • 44