SaintPaddy SaintPaddy - 21 days ago 8
CSS Question

How to keep a navbar toggle open until selection is made

I've quite a long drop down menu on a site I'm working on when it switches over to mobile. For the life of me I cannot get this dropdown navbar toggle to stay open. What it currently does is opens to show all the selections and then it snaps up to only show one possible selection. It's a scrollable menu, but I want it to stay open until it's clicked.... Can anyone see what I'm doing wrong?



//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});


// Only enable if the document has a long scroll bar
// Note the window height + offset
if (($(window).height() + 100) < $(document).height()) {
$('#top-link-block').removeClass('hidden').affix({
// how far to scroll down before link "slides" into view
offset: {
top: 100
}
});
}

//Fade in for well-trigger on index.html
var divs = $('.well-trigger');
$(window).scroll(function() {
if ($(window).scrollTop() < 480) {
divs.stop(true, true).fadeIn("slow");
} else {
divs.stop(true, true).fadeOut("slow");
}
});

.navbar {
font-family: 'Contrail One', cursive;
padding: 10px;
font-size: 18px;
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.navbar-brand {
padding-top: 5px;
}
.navbar-toggle {
margin: 10px 0;
}
.navbar-inverse {
background-color: #000011;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: 80px;
line-height: 80px;
padding-left: 5px;
padding-right: 5px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom: 0;
margin: 0px -5px 0px -5px;
}
@media (max-width: 767px) {
.navbar-brand {
padding: 0px;
}
.navbar-brand img {
margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: 50px;
line-height: 50px;
padding-left: 5px;
padding-right: 5px;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 href="http://www.example.com/testing/index.html">
<div class="navbar-brand navbar-brand-left">
<img class="hidden-xs" src="img/logo_transparent_REG.png" alt="">
<img class="visible-xs" src="img/logo_transparent_XS.png" alt="">
</div>
</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a href="http://www.example.com/testing/courses.html">REGISTRATION</a>
</li>
<li>
<a href="http://www.example.com/testing/overview.html">COURSE OVERVIEW</a>
</li>
<li>
<a href="http://www.example.com/testing/services.html">SERVICES</a>
</li>
<li>
<a href="http://www.example.com/testing/instructors.html">INSTRUCTORS</a>
</li>
<li>
<a href="http://www.example.com/testing/blog.html">BLOG</a>
</li>
<li>
<a href="http://www.example.com/testing/contact.html">CONTACT</a>
</li>
<li>
<a href="http://www.example.com/testing/links.html">LINKS</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>

</nav>




Answer

You have set the height to 50px in the @media-query. Change it to auto, and all is well.

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
  if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
  } else {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
  }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
  $('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
  });
});


// Only enable if the document has a long scroll bar
// Note the window height + offset
if (($(window).height() + 100) < $(document).height()) {
  $('#top-link-block').removeClass('hidden').affix({
    // how far to scroll down before link "slides" into view
    offset: {
      top: 100
    }
  });
}

//Fade in for well-trigger on index.html
var divs = $('.well-trigger');
$(window).scroll(function() {
  if ($(window).scrollTop() < 480) {
    divs.stop(true, true).fadeIn("slow");
  } else {
    divs.stop(true, true).fadeOut("slow");
  }
});
.navbar {
  font-family: 'Contrail One', cursive;
  padding: 10px;
  font-size: 18px;
  -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
  -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
  transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.navbar-brand {
  padding-top: 5px;
}
.navbar-toggle {
  margin: 10px 0;
}
.navbar-inverse {
  background-color: #000011;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
  height: 80px;
  line-height: 80px;
  padding-left: 5px;
  padding-right: 5px;
}
.navbar-nav li a {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0px -5px 0px -5px;
}
@media (max-width: 767px) {
  .navbar-brand {
    padding: 0px;
  }
  .navbar-brand img {
    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
  }
  .navbar-nav,
  .navbar-nav li,
  .navbar-nav li a {
    height: auto;
    line-height: 50px;
    padding-left: 5px;
    padding-right: 5px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 href="http://www.example.com/testing/index.html">
        <div class="navbar-brand navbar-brand-left">
          <img class="hidden-xs" src="img/logo_transparent_REG.png" alt="">
          <img class="visible-xs" src="img/logo_transparent_XS.png" alt="">
        </div>
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav navbar-right">
        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
        <li class="hidden">
          <a class="page-scroll" href="#page-top"></a>
        </li>
        <li>
          <a href="http://www.example.com/testing/courses.html">REGISTRATION</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/overview.html">COURSE OVERVIEW</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/services.html">SERVICES</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/instructors.html">INSTRUCTORS</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/blog.html">BLOG</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/contact.html">CONTACT</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/links.html">LINKS</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>

</nav>