0

Estou com problemas na lição 2 do curso de bootstrap

#HTML #Bootstrap #CSS
Leonardo Santana
Leonardo Santana

quando coloco a classe .navbar no CSS não acontece nada, seria para o menu ficar da cor que selecionei, segue abaixo o meu código:

<!DOCTYPE html>

<html lang="pt-br">

    <head>

      <meta charset="utf-8">

      <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title>Minha Pagina</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

        <link rel="stylesheet" type="text/css" href="CSS/style.css">

        </head>

        <body>

         <nav class="navbar navbar-expand-lg navbar-light bg-light">

           <a class="navbar-brand" href="#"><img src="images/globallabs.png" width="220px" height="80px" ></a>

           <div class="collapse navbar-collapse">

              <ul class="navbar-nav">

                <li class="nav-item">

                    <a class="nav-link" href="#">Quem somos</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">Parceiros</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">Serviços</a>

                </li>

              </ul>

            </div>


         </nav>


        </body>

        

</html>


CSS:

.navbar {

    background-color:red;

}


Desde já agradeço, pois não estou conseguindo encontrar o erro, que não faz a adição da cor no menu do meu site.

0
2

Comentários (4)

0
V

Vinícius Silva

21/08/2021 19:42

Olá, boa noite, eu fiz essa aula, e tive um problema nessa parte também, para o meu funcionar eu tive de tirar a última parte da linha da tag da navbar

o seu código é esse

<nav class="navbar navbar-expand-lg navbar-light bg-light">

tenta utilizar esse aqui

<nav class="nav bar navbar-expand-lg navbar-light">

essa classe bg-light deixa o background como estabelecido pela classe pelo próprio bootstrap

0
E

Emerson Neves

10/08/2021 12:25

oi boa tarde

eu dei uma olhada não entendi direito o seu problema mais fiz uma alteração em seu código vou enviar a vc e vc da uma olhada



<!DOCTYPE html>


<html lang="pt-br">


    <head>


      <meta charset="utf-8">


      <meta http-equiv="X-UA-Compatible" content="IE=edge">


        <title>Minha Pagina</title>


        <meta name="viewport" content="width=device-width, initial-scale=1">


        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


        <link rel="stylesheet" type="text/css" href="CSS/style.css">


        </head>


        <body>


         <nav class="navbar navbar-expand-lg navbar-light bg-light">


           <a class="navbar-brand" href="#"><img src="images/globallabs.png" width="220px" height="80px" ></a>


           <div class="collapse navbar-collapse">


              <ul class="navbar-nav">


                <li class="nav-item">


                    <a class="nav-link" href="#">Quem somos</a>


                </li>


                <li class="nav-item">


                    <a class="nav-link" href="#">Parceiros</a>


                </li>


                <li class="nav-item">


                    <a class="nav-link" href="#">Serviços</a>


                </li>


              </ul>


            </div>




         </nav>




        </body>


        


</html>








0
Leonardo Santana

Leonardo Santana

10/08/2021 12:21

Olá @Paulo Tarcio muito obrigado pela dica, mas ele está correto "style" tanto no arquivo .css como no ponto destacado por você

0
Paulo Tarcio

Paulo Tarcio

10/08/2021 12:08

Bom dia, Lucas.

Não assisti a vídeo-aula, porém se seu arquivo HTML não esta sofrendo alterações do CSS é porque a referência não esta correta, verifique, por exemplo, se o arquivo style não esta no plural, "styles".

Provavelmente a seu problema esta nessa linha:


<link rel="stylesheet" type="text/css" href="CSS/style.css">

Tenho atualmente 18 anos trabalho de Jovem aprendiz na área administrativa e estou cursando o curso de Analise e Desenvolvimento de Sistemas

Brasil