My responsive nav "pops out" at 767 px, how to avoid this completely

Question

Hi the nav starts out at top but then in the middle it opens automatically, and then finally collapses into a open icon.

I don't want this pop out at all, as I have few elements in my nav and it can adjust all the way down to where it collapses.

How can I do this? I tried modifying the bootstrap, but its tough...should I be changing the max-width:767px or the min-width:768px?

Any advice would help.

$(document).ready(function() {


  //stick in the fixed 100% height behind the navbar but don't wrap it
  $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>'));

  $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></div>'));

  // Enter your ids or classes
  var toggler = '.navbar-toggle';
  var pagewrapper = '#page-content';
  var navigationwrapper = '.navbar-header';
  var menuwidth = '100%'; // the menu inside the slide menu itself
  var slidewidth = '80%';
  var menuneg = '-100%';
  var slideneg = '-80%';


  $("#slide-nav").on("click", toggler, function(e) {

    var selected = $(this).hasClass('slide-active');

    $('#slidemenu').stop().animate({
      left: selected ? menuneg : '0px'
    });

    $('#navbar-height-col').stop().animate({
      left: selected ? slideneg : '0px'
    });

    $(pagewrapper).stop().animate({
      left: selected ? '0px' : slidewidth
    });

    $(navigationwrapper).stop().animate({
      left: selected ? '0px' : slidewidth
    });


    $(this).toggleClass('slide-active', !selected);
    $('#slidemenu').toggleClass('slide-active');


    $('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active');


  });


  var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header';


  $(window).on("resize", function() {

    if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
      $(selected).removeClass('slide-active');
    }


  });




});

/* adjust body when menu is open */

body.slide-active {
  overflow-x: hidden
}


/*first child of #page-content so it doesn't shift around*/

.no-margin-top {
  margin-top: 0px!important
}


/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */

#page-content {
  position: relative;
  padding-top: 70px;
  left: 0;
}

#page-content.slide-active {
  padding-top: 0
}


/* put toggle bars on the left :: not using button */

#slide-nav .navbar-toggle {
  cursor: pointer;
  position: relative;
  line-height: 0;
  float: left;
  margin: 0;
  width: 30px;
  height: 40px;
  padding: 10px 0 0 0;
  border: 0;
  background: transparent;
}


/* icon bar prettyup - optional */

#slide-nav .navbar-toggle>.icon-bar {
  width: 100%;
  display: block;
  height: 3px;
  margin: 5px 0 0 0;
}

#slide-nav .navbar-toggle.slide-active .icon-bar {
  background: orange
}

.navbar-header {
  position: relative
}


/* un fix the navbar when active so that all the menu items are accessible */

.navbar.navbar-fixed-top.slide-active {
  position: relative
}


/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */

@media (max-width:767px) {
  #slide-nav .container {
    margin: 0!important;
    padding: 0!important;
    height: 100%;
  }
  #slide-nav .navbar-header {
    margin: 0 auto;
    padding: 0 15px;
  }
  #slide-nav .navbar.slide-active {
    position: absolute;
    width: 80%;
    top: -1px;
    z-index: 1000;
  }
  #slide-nav #slidemenu {
    background: #f7f7f7;
    left: -100%;
    width: 80%;
    min-width: 0;
    position: absolute;
    padding-left: 0;
    z-index: 2;
    top: -8px;
    margin: 0;
  }
  #slide-nav #slidemenu .navbar-nav {
    min-width: 0;
    width: 100%;
    margin: 0;
  }
  #slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
    min-width: 0;
    width: 80%;
    white-space: normal;
  }
  #slide-nav {
    border-top: 0
  }
  #slide-nav.navbar-inverse #slidemenu {
    background: #333
  }
  /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
  #navbar-height-col {
    position: fixed;
    top: 0;
    height: 100%;
    bottom: 0;
    width: 80%;
    left: -80%;
    background: #f7f7f7;
  }
  #navbar-height-col.inverse {
    background: #333;
    z-index: 1;
    border: 0;
  }
  #slide-nav .navbar-form {
    width: 100%;
    margin: 8px 0;
    text-align: center;
    overflow: hidden;
    /*fast clearfixer*/
  }
  #slide-nav .navbar-form .form-control {
    text-align: center
  }
  #slide-nav .navbar-form .btn {
    width: 100%
  }
}

@media (min-width:768px) {
  #page-content {
    left: 0!important
  }
  .navbar.navbar-fixed-top.slide-active {
    position: fixed
  }
  .navbar-header {
    left: 0!important
  }
}

<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>


  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-toggle">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="slidemenu">

        <form class="navbar-form navbar-right" role="form">
          <div class="form-group">
            <input type="search" placeholder="search" class="form-control">
          </div>
          <button type="submit" class="btn btn-primary">Search</button>
        </form>

        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link test long title goes here</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>

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


  <!--wrap the page content do not style this-->
  <div id="page-content">

    <div class="container">
      <h1 class="no-margin-top">Bootstrap starter template</h1>
      <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p>

      <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p>












    </div>
    <!-- /.container -->

  </div>
  <!-- /#page-content -->

</body>

</html>

I basically want a very small collapse point and no pop out at all. Its only got 3 links in there. — RhZ, Jul 26 '15 at 13:35

score 2 · Accepted Answer · edited May 23 '17 at 11:52

2

I am sorry if I did not understand your question properly, but I think what you want was your menubar to not go in a separate line when collapsing. If I am wrong, please let me know. To do that do the following:

Add a class customcss to the container class under the navbar class. Then add the css to this customclass.

<div class="container customcss">
   <div class="navbar-header">
        ...
   </div>
</div>

CSS:

.customcss {
  width: auto;
}

This does the trick and your menubar does not go in the next line AS LONG AS YOU DON'T ADD ANYTHING ELSE. But if in future you do decide to add something, please take a look at this SO Answer. It tells you how you can change the collapse threshold in bootstrap 3 so that you can collapse earlier.

Basically you need to go to the bootstrap site and change the width where the break happens. Then download the new css file and replace with the one you have currently.

edited May 23 '17 at 11:52

Community

1
1

answered Jul 26 '15 at 14:06

Rash

7,677
1
53
74

U R great! That is exactly what wanted! Thanks so much! – RhZ Jul 26 '15 at 14:28
@RhZ no problem mate. Enjoy your day. – Rash Jul 26 '15 at 14:29
this didnt work yet but I think its because i messed with some sizing values. I am going to go back to the original code and start over ;-) Also the link was helpful to understand how to maintain some control. The jsbin file doesn't even pop out at all to start with it seems...so it would be my changes which have caused it. – RhZ Jul 26 '15 at 18:11
@RhZ Don't worry you will get it. If not, just let me know and I will create a JSFIDDLE. – Rash Jul 26 '15 at 19:13

My responsive nav "pops out" at 767 px, how to avoid this completely

1 Answers1