django django - 4 months ago 24
HTML Question

Show and hide Bootstrap Navbar's buttons based on screen width

I am using pretty Common setup of twitter Bootstrap 3 navbar-header.

SETUP:


  1. navbar-header
    has 2
    navbars

  2. one
    navbar
    is floating left with lots of buttons (extending height of
    navbar-header
    )

  3. 2nd
    navbar
    is floating right



REQUIREMENT:


  1. I want to have fixed height of navbar-header and since i am using lots of buttons on floating left menu , navbar-header expands in height

  2. I want to hide extra buttons on floating left
    navbar
    that will cause
    navbar-header
    to expand in height

  3. this should work on
    $(window).resize(function() {});



In simple words, when window is resized , extra buttons should hide and shown based on available size so that
navbar-header
does not expand in height.

Currently I am having trouble with floating right menu.

JSFIDDLE: https://jsfiddle.net/bababalcksheep/wsxa0zae/4/
Try resizing window

var adjustable = function() {
var collection = [];
$('.adjustable-drop').find('> li').removeClass('hide').each(function() {
if (this.offsetTop > 51) {
collection.push(this);
}
});
$(collection).addClass('hide');
};


$(window).resize(function() {
adjustable();
});
$(window).trigger('resize');

Answer

UPD. I've improved my solution. (The first version is here.)

  1. I've used .outerWidth() and .width() methods instead of the .offsetTop.

  2. I guess you can remove <div class="container-fluid"></div> from the Navbar because the Navbar is wrapped into <div class="container"></div>.

  3. We need to show all elements of the Navbar when the width of the screen is 767px or less.

Please check the result: https://jsfiddle.net/glebkema/yt985oxf/

var selectNavbar = $('#navbar');
var selectNavbarHeader = $('.navbar-header');

var adjustable = function() {
  if ( document.documentElement.clientWidth <= 767 ) {
    $('.adjustable-drop .hide').removeClass('hide');
  } else {
    var collection = [];
    var widthFree = selectNavbar.width() - selectNavbarHeader.outerWidth(true) - selectNavbar.find('.navbar-right').outerWidth(true);
    $('.adjustable-drop').find('> li').removeClass('hide').each(function() {
      if ( widthFree >= $(this).outerWidth(true) ) {
        widthFree -= $(this).outerWidth(true);
      } else {
        collection.push(this);
      }
    });
    $(collection).addClass('hide');
  }
};

$(window).resize(function() {
  adjustable(); 
});

$(window).trigger('resize');
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">

  <!-- Static navbar -->
  <nav class="navbar navbar-default">
    <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 adjustable-drop">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Additional-1</a></li>
        <li><a href="#">Additional-2</a></li>
        <li><a href="#">Additional-3</a></li>
        <li><a href="#">Additional-4</a></li>
        <li><a href="#">Additional-5</a></li>
        <li><a href="#">Additional-6</a></li>
        <li><a href="#">Additional-7</a></li>
        <li><a href="#">Additional-8</a></li>
        <li><a href="#">Additional-9</a></li>
        <li><a href="#">Additional-10</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </nav>

  <!-- Main component for a primary marketing message or call to action -->
  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Comments