Olá, tudo bem? Não estou conseguindo colocar o menu hamburguer aparecer. Ja editei e nada https://codepen.io/eunathalia/pen/ZEPJRoW
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
Olá, tudo bem? Não estou conseguindo colocar o menu hamburguer aparecer. Ja editei e nada https://codepen.io/eunathalia/pen/ZEPJRoW
Oi Nathalia, tudo bem?
Fiz algumas mudanças no seu código para que o Menu aparecesse, comentei no código CSS o que mudei:
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documento</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Coding <span style="color: #0000ff;">Addict</span></h1>
<div id="menu">
<label for="menu-checkbox" id="logo"></label>
<input type="checkbox" id="menu-checkbox">
<div id="menu-content">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Projetos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
</div>
</body>
</html>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
margin: 0; /* Remover margens padrão do corpo da página */
padding: 0; /* Remover preenchimento padrão do corpo da página */
}
h1 {
padding: 30px;
margin: 0; /* Remover margens padrão do h1 */
}
#menu {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
#logo,
#menu-icon {
background: url('https://raw.githubusercontent.com/alura-cursos/alurabooks/2c2d01dce8fb86198de987b04a64befeb3b72ba1/img/Menu.svg') no-repeat;
width: 30px;
height: 30px;
display: block;
cursor: pointer;
}
#menu-content {
display: none;
position: absolute;
top: 60px; /* Ajuste conforme necessário para a posição do menu suspenso */
right: 10px; /* Ajuste conforme necessário para a posição do menu suspenso */
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 10px;
}
#menu-checkbox {
display: none; /* Ocultar a checkbox padrão */
}
#menu-checkbox:checked+#menu-content {
display: block; /* Exibir o menu quando a checkbox estiver marcada */
}
a {
text-decoration: none;
color: black;
}
li {
margin: auto;
text-align: end;
display: inline;
margin-right: 10px;
}
Utilizei uma checkbox oculta para controlar o estado do menu. Quando a checkbox está marcada, o menu é exibido. Essa abordagem é puramente baseada em HTML e CSS. Você pode ajustar a posição do menu suspenso e outros estilos conforme necessário.
Ah eu usei uma imagem da web pois não tinha a sua imagem para testar. Você precisa mudar para a sua imagem de volta.
Um abraço e bons estudos.