Bootstrap 4 - Fixed Navbar with White Background

Asked

Viewed 349 times

0

I’m in trouble because I can’t keep my Navbar on a white background when she goes from 400px down. I want it transparent at the beginning and after 400px it gets a white background.Ps: I want to edit the navbar when I can do this. Follow the code

<!DOCTYPE html>
<html>
<head>
<title>Titulo.</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<meta name="viewport" content="width=device-width", initial-scale=1>
<link rel="stylesheet" href="css/all-animation.min.css" type="text/css">
<link rel="stylesheet" href="css/animate.css" type="text/css">
<link rel="shortcut icon" href="caminhodoarquivo/favicon.ico">
<link rel="stylesheet" href="css/reset.css" type="text/css">
<style>
 bg-darl.scrolled(TENTEI FAZER ISSO MAS N DEU) {
  background-color:white !important;
  }

</style>
</head>

<body>
 <div class="mynavbar">
    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a href="indexpadrao.html" class="navbar-brand">
    <img src="images/logo.png">
</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" 
data-target="#conteudoNavbarSuportado" aria- 
controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna 
navegação">
  <span class="navbar-toggler-icon"></span>
    </button>

  <div class="collapse navbar-collapse " id="conteudoNavbarSuportado">
   <ul class="navbar-nav ml-auto">
       <li class="nav-item">
           <a href="plans.html" class="nav-link text-white">Home</a>
       </li>
       <li class="nav-item">
           <a href="#" class="nav-link text-white">Sobre</a>
       </li>
       <li class="nav-item pr-2">
           <a href="#" class="nav-link text-white">Portifolio</a>
       </li>
       <li class="nav-item">
           <button type="button" class="btn btn-outline- 
 light">Contato</button>
       </li>     
   </ul>                  
</div>      
</nav>
<div class="principal2">
 <h1 class="display-1">Meu Nome é Matheus Luiz.</h1>
   <hr>
    <h3 class="display-1">Sejam Bem-Vindos e conheçam um pouco do meu 
trabalho.</h3>
    <button type="button" class="btn btn-outline-dark btn-lg display-1" 
 style="padding-left:30px;padding-right: 30px;font-size:1.8rem">Saiba 
  mais</button>
     </div> 
</div>
 <!-- Primeiro o jsquery -->
 <!-- Segundo o Popper min -->
 <!-- Terceiro o Bootstrap js -->
 <script type="text/javascript" src="js/our.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>   
<script type="text/javascript" src="js/popper.min.js"></script>   
<script type="text/javascript" src="js/bootstrap.js"></script>
<script>
$(window).scroll(function(){
   $('nav').toggleClass('scrolled',$(this).scrollTop() > 400);
      });

</script>
 </body>  
  </html>
bootstrap-4 nav-bar responsive

1 answer

1

Your code is right, only the dial is wrong: this bg-darl there is no.

You should use nav.scrolled.

Behold:

$(window).scroll(function(){
   $('nav').toggleClass('scrolled',$(this).scrollTop() > 400);
});
nav.scrolled{
  background-color:white !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="mynavbar">
    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a href="indexpadrao.html" class="navbar-brand">
    <img src="images/logo.png">
</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" 
data-target="#conteudoNavbarSuportado" aria- 
controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna 
navegação">
  <span class="navbar-toggler-icon"></span>
    </button>

  <div class="collapse navbar-collapse " id="conteudoNavbarSuportado">
   <ul class="navbar-nav ml-auto">
       <li class="nav-item">
           <a href="plans.html" class="nav-link text-white">Home</a>
       </li>
       <li class="nav-item">
           <a href="#" class="nav-link text-white">Sobre</a>
       </li>
       <li class="nav-item pr-2">
           <a href="#" class="nav-link text-white">Portifolio</a>
       </li>
       <li class="nav-item">
           <button type="button" class="btn btn-outline- 
 light">Contato</button>
       </li>     
   </ul>                  
</div>      
</nav>
<div class="principal2">
 <h1 class="display-1">Meu Nome é Matheus Luiz.</h1>
   <hr>
    <h3 class="display-1">Sejam Bem-Vindos e conheçam um pouco do meu 
trabalho.</h3>
    <button type="button" class="btn btn-outline-dark btn-lg display-1" 
 style="padding-left:30px;padding-right: 30px;font-size:1.8rem">Saiba 
  mais</button>
     </div> 
</div>

  • Beauty bro, helped too much just a little doubt. I need to change the logo and colors of the navbar font. Where can I do it? I put . scrollTop() > 200); When white bg appears I need to change the logo and font color. Any idea how I can do this?

  • Blz. Just be sure to mark the answer if it solved the problem. To change the logo you can do the following: put two <img> tags with the two logos, one will be with display: None before 200px... then when you reach 200px you hide the first and show the second, and vice versa. To change the color the same thing. Add in class . scrolled the color you want: ex., color: red;

Browser other questions tagged bootstrap-4 nav-bar responsive

You are not signed in. Login or sign up in order to post.