Mesmo aplicando as classes corretas o menu fica com todos os itens sempre exibidos. Qual pode ser o problema?
Solucionado
Mesmo aplicando as classes corretas o menu fica com todos os itens sempre exibidos. Qual pode ser o problema?
hoje, com a Alura e o Google Gemini
Oi Márcio,
Poste aqui o código da sua página para vermos qual o problema.
Oi Rodrigo. Segue abaixo o Html:
<!DOCTYPE html>
Caelum Menu
Novidades
Camisa azul importada
Camisa azul importada por um preço acessível e com tecido de qualidade
R$ 190,00
Comprar
Camisa azul turca
Camisa azul importada por um preço acessível e com tecido de qualidade
R$ 120,00
Comprar
Camisa rosa brasileira
Camisa rosa brasileira por um preço alto e com tecido de qualidade inferior
R$ 380,00
Comprar
Abraço;
Marcio, aqui não apareceu o código, e sim a apresentação do html. Tenta postar novamente?
Abaraço!
Oi Márcio,
Coloque seu código entre três crases(`) para que ele aparece corretamente.
Tipo assim:
```
seu codigo aqui
```
Segue:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Loja Virtual</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<header>
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a href="#" class="navbar-brand">Caelum</a>
<button type="button" data-target=".navbar-collapse" data-toggle="collapse" class="navbar-collapse navbar-right">Menu</button>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="navbar-nav nav">
<li><a href="#">Novidades</a></li>
<li><a href="#">Mais vendidos</a></li>
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Camisetas
<span class="caret"></span>
</a>
<ul class="dropdown">
<li>Masculina</li>
<li>Feminina</li>
<li>Infantil</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<main>
<h3 class="text-center">Novidades</h3>
<div class="col-md-4 thumbnail text-center">
<figure>
<img src="img/camisa-azul.png" alt="camisa azul importada">
<h4>Camisa azul importada</h4>
<p>Camisa azul importada por um preço acessível e com tecido de qualidade</p>
</figure>
<p>R$ 190,00</p>
<button class="btn btn-info" type="button">Comprar</button>
</div>
<div class="col-md-4 thumbnail text-center">
<figure>
<img src="img/produto.png" alt="camisa azul importada">
<h4>Camisa azul turca</h4>
<p>Camisa azul importada por um preço acessível e com tecido de qualidade</p>
</figure>
<p>R$ 120,00</p>
<button class="btn btn-info" type="button">Comprar</button>
</div>
<div class="col-md-4 thumbnail text-center">
<figure>
<img src="img/camisa-rosa.png" alt="camisa azul importada">
<h4>Camisa rosa brasileira</h4>
<p>Camisa rosa brasileira por um preço alto e com tecido de qualidade inferior</p>
</figure>
<p>R$ 380,00</p>
<button class="btn btn-info" type="button">Comprar</button>
</div>
</main>
</body>
</html>
``````````Oi Márcio,
Testei aqui com o seu código e está escondendo os itens do menu(Novidades, Mais vendidos, Camisetas) quando redimenciono a tela, deixando-a pequena.
O que não está funcionando é o botão menu, que é feito nos próximos exercícios.
Fala Rodrigo;
Esse código é uma versão de quando comecei a tentar resolver o problema e mesmo nele eu já tinha feito algumas alterações.
Com o passar do curso outros elementos foram sendo adicionados à página mas até agora o menu não está funcionando como deveria.
No momento, com todas as alterações que eu já fiz, a maioria por conta própria, o comportamento dele ainda não é o correto.
Vou colar o código abaixo de como ele está atualmente pra você dar uma olhada (todo o HTML):
Obrigado pela ajuda.
Abraço;
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Loja Virtual</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/style.css"/>
<link href='http://fonts.googleapis.com/css?family=Gruppo' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a href="#" class="navbar-brand">Caelum</a>
<button type="button" data-target=".navbar-collapse" data-toggle="collapse" class="navbar-collapse navbar-right">Menu</button>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="navbar-nav nav">
<li><a href="#">Novidades</a></li>
<li><a href="#">Mais vendidos</a></li>
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Camisetas
<span class="caret"></span>
</a>
<ul class="dropdown">
<li>Masculina</li>
<li>Feminina</li>
<li>Infantil</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="container-fluid"> <!---------------------------------------------------BANNER ------>
<div class="row">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner1.jpg" alt="Moda" class="fullscreen">
</div>
<div class="item">
<img src="img/banner2.jpg" alt="Moda Infantil" class="fullscreen">
</div>
<a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<div class="container-fluid"> <!-------------------------------LISTA ------>
<div class="row">
<div class="col-sm-3">
<div><h3 class="text-center">Categorias</h3></div>
<ul class="list-group">
<li class="list-group-item"><a href="#">Camisetas Masculinas</a></li>
<li class="list-group-item"><a href="#">Camisetas Femininas</a></li>
<li class="list-group-item"><a href="#">Roupas de Inverno</a></li>
<li class="list-group-item"><a href="#">Roupas de Verão</a></li>
</ul>
</div>
<div class="col-sm-9">
<h3 class="text-center">Novidades</h3><!-------------------------------NOVIDADES ------>
<div class="col-md-4 thumbnail text-center wow fadeInUp" data-wow-delay="0.5s">
<figure>
<img src="img/camisa-azul.png" alt="camisa azul importada">
<h4>Camisa azul importada</h4>
<p>Camisa azul importada por um preço acessível e com tecido de qualidade</p>
</figure>
<div class="btn-group">
<a href="#" class="btn btn-default">
R$ 190,00
</a>
<a href="#" class="btn btn-primary">
<span class="glyphicon glyphicon-shopping-cart"></span>
Comprar
</a>
</div>
</div>
<div class="col-md-4 thumbnail text-center wow fadeInUp" data-wow-delay="0.5s">
<figure>
<img src="img/produto.png" alt="camisa azul importada">
<h4>Camisa azul turca</h4>
<p>Camisa azul importada por um preço acessível e com tecido de qualidade</p>
</figure>
<div class="btn-group">
<a href="#" class="btn btn-default">
R$ 120,00
</a>
<a href="#" class="btn btn-primary">
<span class="glyphicon glyphicon-shopping-cart"></span>
Comprar
</a>
</div>
</div>
<div class="col-md-4 thumbnail text-center wow fadeInUp" data-wow-delay="0.5s">
<figure>
<img src="img/camisa-rosa.png" alt="camisa azul importada">
<h4>Camisa rosa brasileira</h4>
<p>Camisa rosa brasileira por um preço alto e com tecido de qualidade inferior</p>
</figure>
<div class="btn-group">
<a href="#" class="btn btn-default">
R$ 360,00
</a>
<a href="#" class="btn btn-primary">
<span class="glyphicon glyphicon-shopping-cart"></span>
Comprar
</a>
</div>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3">
<h3 class="text-center">Mais Vendidos</h3><!-------------------------------MAIS VENDIDOS ------>
<div class="col-md-4 thumbnail text-center wow fadeInUp" data-wow-delay="0.5s">
<figure>
<img src="img/camisa-azul.png" alt="camisa azul importada">
<h4>Camisa azul importada</h4>
<p>Camisa azul importada por um preço acessível e com tecido de qualidade</p>
</figure>
<div class="btn-group">
<a href="#" class="btn btn-default">
R$ 190,00
</a>
<a href="#" class="btn btn-primary">
<span class="glyphicon glyphicon-shopping-cart"></span>
Comprar
</a>
</div>
</div>
<div class="col-md-4 thumbnail text-center wow fadeInUp" data-wow-delay="0.5s">
<figure>
<img src="img/produto.png" alt="camisa azul importada">
<h4>Camisa azul turca</h4>
<p>Camisa azul importada por um preço acessível e com tecido de qualidade</p>
</figure>
<div class="btn-group">
<a href="#" class="btn btn-default">
R$ 120,00
</a>
<a href="#" class="btn btn-primary">
<span class="glyphicon glyphicon-shopping-cart"></span>
Comprar
</a>
</div>
</div>
<div class="col-md-4 thumbnail text-center wow fadeInUp" data-wow-delay="0.5s">
<figure>
<img src="img/camisa-rosa.png" alt="camisa azul importada">
<h4>Camisa rosa brasileira</h4>
<p>Camisa rosa brasileira por um preço alto e com tecido de qualidade inferior</p>
</figure>
<div class="btn-group">
<a href="#" class="btn btn-default">
R$ 360,00
</a>
<a href="#" class="btn btn-primary">
<span class="glyphicon glyphicon-shopping-cart"></span>
Comprar
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="rodape-site"> <!-------------------------------RODAPÉ ------>
<p class="text-center autor">© Márcio Navegantes - 2015</p><br>
<p class="text-center">21.98887-6963</p>
<p class="text-center"><a href="mailto: mrnavegantes@outlook.com">mrnavegantes@outlook.com</a></p>
</footer>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
$(function(){
new WOW().init();
})
</script>
</body>
</html>
```Oi Márcio,
Testei aqui com o seu novo código e reparei que o problema é o botão menu, que sempre está visível, mesmo com a tela maior.
O problema está nas classes do button:
<button type="button" data-target=".navbar-collapse" data-toggle="collapse" class="navbar-collapse navbar-right">Menu</button>Troque a classe navbar-collapsed pela classe navbar-toggle e também adicione a classe collapsed.
Vai ficar assim:
<button type="button" data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle collapsed navbar-right">Menu</button>Veja se resolve.
Abraços!
Valeu Rodrigo.
Agora funcionou direitinho. Eu tinha trocado várias classes fazendo testes e tinha acabado ficando assim. Tinha mais um errinho no submenu mas já corrigi também.
Obrigado pela ajuda.
Abraço;