CODEWITHSUNDEEP
jquerytwitter-bootstrap
Deepak Jawalkar
Deepak Jawalkar

Reputation: 77

Dual Bootstrap Navbar with Single Toggle Button

I do have two bootstrap navbar wherein I want to collapse the list items of two into a single ul at mobile view with single toggle button.

Any help would be great.

 <nav class="navbar nav1">
  <div class="container">
    <div class="navbar-header">
     <!--  <button type="button" class="navbar-toggle toggle1" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button> -->
     <!--  <a class="navbar-brand" href="#">WebSiteName</a> -->
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right top-nv text-uppercase">
        <li><a href="#">About US</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Group Site</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#"><i>Client Login</i></a></li>
      </ul>
    </div>
  </div>
</nav>
    <!-----------     ------------->

    <div class="navbar navbar-inverse nav2" role="navigation">  
    <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="images/home/logo.png" alt="LOGO"></a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar2">
        <ul class="nav navbar-nav pull-right cust-nav text-uppercase ">
            <li><a href="#">Wealth management</a></li>
            <li><a href="#">Multi manager</a></li>
            <li><a href="#">Asset manager</a></li>
            <li><a href="#">International</a></li>
            <li><a href="#">News & Insights</a></li>
            <div class="hd hidden-md"></div>
        </ul>

        </div>
        </div>
    </div>

the script which i tried is.The problem is i am unable to append it to the other ul and how to break the foreach loop. 

$(document).ready(function(){
    if ($(window).width() < 960){
        alert();
        $( ".navbar-toggle" ).click(function() {
            $(".navbar-nav.top-nv").each(function(){
                alert(2);   
                $(".hd").append('<li>'+$(this).text()+'<br>'+'</li>').css({"color":"red","display":"block"});
            });
            $(".navbar-nav.top-nv").remove();
            //$(".two").append($("ul.two"));
        }); 
    }
});

Upvotes: 0

Views: 565

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362430

The Bootstrap navbar does not collapse into mobile at 960px. I think a better approach is using the 'show.bs.collapse' event. 768px is the default collapse point of the navbar.

$('#myNavbar2').on('show.bs.collapse', function () {
  $('#myNavbar2').append($('#myNavbar').html());
  $('#myNavbar2 ul').last().addClass('navbar navbar-nav');
});
$('#myNavbar2').on('hidden.bs.collapse', function () {
  $('#myNavbar2 ul:last-child').remove();
});
$(window).on('resize', function () {
  if (window.innerWidth > 768) {$('#myNavbar2').collapse('hide');}
});

Working Demo on Codeply

Upvotes: 1

Cobote
Cobote

Reputation: 395

This will copy and add the list items from .nav1 to the end of .nav2 list.

$(document).ready(function(){
  if ($(window).width() < 960){
      alert();
      $( ".navbar-toggle" ).click(function() {
          $(".navbar-nav.top-nv li").each(function(){
              var $navItem = $(this).clone();
              alert(2); 
              $navItem.find('a').css({"color":"red","display":"block"});
              $("#myNavbar2 ul").append($navItem);
          });
          $(".navbar-nav.top-nv").remove();
          //$(".two").append($("ul.two"));
      }); 
  }
});

Upvotes: 1

Related Questions