Skip to main content
Pergunta fechada como "Duplicada" por hugocsl css
adicionou 7 caracteres ao conteúdo
Fonte Link
user24136
user24136

Tenho um menu fixo com Bootstrap onde fica a logomarca:

           <div class="container">
        <a class="navbar-brand" href="index.html"><img src="images/logo.png" class="logoid="logo" maxlogoclass="maxlogo img-responsive"></a>
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    </div>
    </nav>

Porém ao rolar a página,como o menu é fixo, gostaria de diminuir a logomarca. Para isso tentei da seguinte forma:

CSS

  .maxlogo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 180px;
}
.minilogo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 100px;
}

JQuery

<script>
  $(document).on("scroll",function(){
      if($(document).scrollTop()>100){
          $("logo""#logo").removeClass("maxlogo").addClass("minilogo");
      } else{
          $("logo""#logo").removeClass("minilogo").addClass("maxlogo");
      }
  });
</script>

Só que ao rolar a página, ele está diminuindo a tag nav e não a logomarca. Como posso corrigir isso?

Tenho um menu fixo com Bootstrap onde fica a logomarca:

           <div class="container">
        <a class="navbar-brand" href="index.html"><img src="images/logo.png" class="logo maxlogo img-responsive"></a>
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    </div>
    </nav>

Porém ao rolar a página,como o menu é fixo, gostaria de diminuir a logomarca. Para isso tentei da seguinte forma:

CSS

  .maxlogo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 180px;
}
.minilogo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 100px;
}

JQuery

<script>
  $(document).on("scroll",function(){
      if($(document).scrollTop()>100){
          $("logo").removeClass("maxlogo").addClass("minilogo");
      } else{
          $("logo").removeClass("minilogo").addClass("maxlogo");
      }
  });
</script>

Só que ao rolar a página, ele está diminuindo a tag nav e não a logomarca. Como posso corrigir isso?

Tenho um menu fixo com Bootstrap onde fica a logomarca:

           <div class="container">
        <a class="navbar-brand" href="index.html"><img src="images/logo.png" id="logo" class="maxlogo img-responsive"></a>
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    </div>
    </nav>

Porém ao rolar a página,como o menu é fixo, gostaria de diminuir a logomarca. Para isso tentei da seguinte forma:

CSS

  .maxlogo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 180px;
}
.minilogo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 100px;
}

JQuery

<script>
  $(document).on("scroll",function(){
      if($(document).scrollTop()>100){
          $("#logo").removeClass("maxlogo").addClass("minilogo");
      } else{
          $("#logo").removeClass("minilogo").addClass("maxlogo");
      }
  });
</script>

Só que ao rolar a página, ele está diminuindo a tag nav e não a logomarca. Como posso corrigir isso?

adicionou 134 caracteres ao conteúdo
Fonte Link
user24136
user24136

Tenho um menu fixo com Bootstrap onde fica a logomarca:

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-teal fixed-top">
     <div class="container">
        <a class="navbar-brand" href="index.html"><img src="images/logo.png" class="logo maxlogo img-responsive"></a>
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    </div>
    </nav>

Porém ao rolar a página,como o menu é fixo, gostaria de diminuir a logomarca. Para isso tentei da seguinte forma:

CSS

  .logomaxlogo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 180px;
}
.minilogo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 100px;
}

JQuery

<script>
  $(document).on("scroll",function(){
      if($(document).scrollTop()>100){
          $("nav""logo").removeClass("logo""maxlogo").addClass("minilogo");
      } else{
          $("nav""logo").removeClass("minilogo").addClass("logo""maxlogo");
      }
  });
</script>

Só que ao rolar a página, ele está diminuindo a tag nav e não a logomarca. Como posso corrigir isso?

Tenho um menu fixo com Bootstrap onde fica a logomarca:

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-teal fixed-top">
    <div class="container">
    <a class="navbar-brand" href="index.html"><img src="images/logo.png" class="logo img-responsive"></a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
</div>
</nav>

Porém ao rolar a página,como o menu é fixo, gostaria de diminuir a logomarca. Para isso tentei da seguinte forma:

CSS

.logo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 180px;
}
.minilogo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 100px;
}

JQuery

<script>
  $(document).on("scroll",function(){
      if($(document).scrollTop()>100){
          $("nav").removeClass("logo").addClass("minilogo");
      } else{
          $("nav").removeClass("minilogo").addClass("logo");
      }
  });
</script>

Só que ao rolar a página, ele está diminuindo a tag nav e não a logomarca. Como posso corrigir isso?

Tenho um menu fixo com Bootstrap onde fica a logomarca:

           <div class="container">
        <a class="navbar-brand" href="index.html"><img src="images/logo.png" class="logo maxlogo img-responsive"></a>
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    </div>
    </nav>

Porém ao rolar a página,como o menu é fixo, gostaria de diminuir a logomarca. Para isso tentei da seguinte forma:

CSS

  .maxlogo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 180px;
}
.minilogo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 100px;
}

JQuery

<script>
  $(document).on("scroll",function(){
      if($(document).scrollTop()>100){
          $("logo").removeClass("maxlogo").addClass("minilogo");
      } else{
          $("logo").removeClass("minilogo").addClass("maxlogo");
      }
  });
</script>

Só que ao rolar a página, ele está diminuindo a tag nav e não a logomarca. Como posso corrigir isso?

Fonte Link
user24136
user24136

Como diminuir a logomarca ao rolar a página no menu fixo do Bootstrap?

Tenho um menu fixo com Bootstrap onde fica a logomarca:

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-teal fixed-top">
    <div class="container">
    <a class="navbar-brand" href="index.html"><img src="images/logo.png" class="logo img-responsive"></a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
</div>
</nav>

Porém ao rolar a página,como o menu é fixo, gostaria de diminuir a logomarca. Para isso tentei da seguinte forma:

CSS

.logo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 180px;
}
.minilogo {
    position: absolute;
    z-index: 999999999999;
    margin-top: -30px;
    width: 100px;
}

JQuery

<script>
  $(document).on("scroll",function(){
      if($(document).scrollTop()>100){
          $("nav").removeClass("logo").addClass("minilogo");
      } else{
          $("nav").removeClass("minilogo").addClass("logo");
      }
  });
</script>

Só que ao rolar a página, ele está diminuindo a tag nav e não a logomarca. Como posso corrigir isso?