CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Daniel Taub
Daniel Taub

Reputation: 5379

bootstrap navbar refreshing in a strange way

I'm trying to make my website responsive
when I use this navbar in a pc, and I clicking on a button from the navbar it's refresh every click, and when i click from a mobile device it's not doing any problems

<nav class="navbar navbar-inverse bg-primary">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><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="#">main</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="#/">a</a></li>
            <li><a href="#1">b</a></li>
            <li><a href="#2">c</a></li>
        </ul>
    </div>
</div>
</nav>

now i added a script that auto collapse the navbar in mobiles, but in pc browsers it's act strange :

  <script>
    $('.navbar-collapse a').click(function(e) {
        $('.navbar-collapse').collapse('toggle');
    });

</script>

Here is an example

Upvotes: 1

Views: 1403

Answers (6)

Itamar
Itamar

Reputation: 1634

You can just condition the toggle call by the fact the navbar is expanded.

This is due to the fact that is your case, the navbar is never expanded on desktop view.

So basically this will work:

   $('.navbar-collapse a').click(function(e) {
      var $nav =  $('.navbar-collapse'); 

      if($nav.hasClass("in")) // if expanded - collapse
        $('.navbar-collapse').collapse('toggle');
    });

Plunker: https://plnkr.co/edit/f5ythwhkdTOF6lzdCXqK?p=preview

<!--    jquery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css">

<!--Header-->
<div>
  <nav class="navbar navbar-inverse bg-primary">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><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="#">main</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="#/">a</a></li>
          <li><a href="#1">b</a></li>
          <li><a href="#2">c</a></li>
        </ul>
      </div>
    </div>
  </nav>

</div>

<script>
  $('.navbar-collapse a').click(function(e) {
    var $nav = $('.navbar-collapse');
    if ($nav.hasClass("in"))
      $('.navbar-collapse').collapse('toggle');
  });
</script>

Upvotes: 2

Gurmatpal
Gurmatpal

Reputation: 134

please use this is code it will solve your problem. 

 <nav class="navbar navbar-default">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <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="#">Project name</a>
              </div>
              <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                   <li><a href="#/">a</a></li>
                    <li><a href="#1">b</a></li>
                    <li><a href="#2">c</a></li>
                </ul>
              </div><!--/.nav-collapse -->
            </div><!--/.container-fluid -->
          </nav>

Upvotes: 0

Manoj Kadolkar
Manoj Kadolkar

Reputation: 716

Try this 

if (window.matchMedia('(max-width: 767px)').matches) {
    $('.navbar-collapse a').click(function(e) {
        $('.navbar-collapse').collapse('toggle');
    });
}

Upvotes: 0

vsoni
vsoni

Reputation: 2858

I think you should modify your JS code to 

<script>
  $('.navbar-collapse a').click(function(e) {
    if ($(window).width() <= 767){
        $('.navbar-collapse').collapse('toggle');
    }
  });
</script>

Upvotes: 0

Vidhyashankar Madheswaraswamy
Vidhyashankar Madheswaraswamy

Reputation: 169

Modify the JS code as 

if ($(window).width() < 767){
    $('.navbar-collapse a').click(function(e) {
        $('.navbar-collapse').collapse('toggle');
    });
}

Upvotes: 0

Brion Mario
Brion Mario

Reputation: 111

Why are you using an external script to collapse the navbar?

Since you're using bootstrap, class="collapse navbar-collapse" will do the job automatically for you. And I ran the code and it's working fine for me. Please check your browser...

Upvotes: 1

Related Questions