Mesmo aplicando as classes corretas o menu fica com todos os itens sempre exibidos. Qual pode ser o problema?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Mesmo aplicando as classes corretas o menu fica com todos os itens sempre exibidos. Qual pode ser o problema?
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;