Fixed bootstrap menu

Question

Fixed bootstrap menu

Navigation

#1 by (1 votes)

0

I made a menu with an image and the buttons fixed on my site. Using the following code:

<div class="navbar navbar-default  navbar-fixed-top" role="navigation"          style="background-color:#3299CC">
<div>
<img src="img/logo.png" alt="Smiley face" >

</div>


  <div class="container">
<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="atividades.html">Atividades</a></li>
    <li><a href="cronograma.html">Cronograma</a></li>
<li><a href="inscricao.html">Inscrição</a></li>
<li><a href="Contato.html">Contato</a></li>

  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="http://www.pet.br/">PET </a></li>
  </ul>
</div>

But that's how the image and buttons are fixed at the top of the screen, I'd like it when I scroll down, just the buttons would stay fixed at the top of the screen and the image "disappear."

bootstrap

asked by anonymous 08.02.2017 / 21:23

1 answer

How to remove ion-toolbar elevation? How to generate automatic fields

score 1 · Answer 1

You've done right putting your logo on a different div from the menu div. What you should do is give a class to this div (for example <div class="menu-com-logo"> ) once the scroll reaches a certain markup. And this class must have the attribute display: none in CSS; To accomplish this you use jQuery. An example would be this:

jQuery("document").ready(function($) {
  var nav = $('.navbar');
  $(window).scroll(function() {
    if ($(this).scrollTop() > 500) {
      nav.addClass("menu-com-logo");
    } else {
      nav.removeClass("menu-com-logo");
    }
  });
});