Ao clicar no menu hamburguer, o background não ocupa tudo corretamente, conforme o figma | HTML e CSS: responsividade com mobile-first

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Books</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/banner.css">
    <link rel="stylesheet" href="css/carrousel.css">
    <link rel="stylesheet" href="css/topicos.css">
    <link rel="stylesheet" href="css/contato.css">
    <link rel="stylesheet" href="css/rodape.css">
</head>

<body>
    <header class="cabecalho">
        <div class="container">
            <input type="checkbox" id="menu" class="container__botao">
            <label for="menu" class="container__rotulo">
                <span class="cabecalho__menu-hamburguer container__imagem"></span>
            </label>
            <ul class="lista-menu">
                <li class="lista-menu__titulo">Categorias</li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Programação</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Front-end</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Infraestrutura</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Business</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Design & UX</a></li>
            </ul>
            <img src="img/Logo.svg" alt="Logo AluraBook" class="container__imagem">
            <h1 class="container__titulo"><b class="container__titulo--negrito">Alura</b>Books</h1>
        </div>

        <ul class="opcoes">
            <input type="checkbox" id="opcoes-menu" class="opcoes__botao">
            <label for="opcoes-menu">
                <li class="opcoes__item">Categorias</li>
            </label>

            <ul class="lista-menu">
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Programação</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Front-end</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Infraestrutura</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Business</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Design & UX</a></li>
            </ul>

            <li class="opcoes__item"><a href="#" class="opcoes__link">Favoritos</a></li>
            <li class="opcoes__item"><a href="#" class="opcoes__link">Minha estante</a></li>
        </ul>

.container__imagem {
    padding: 0.2em;
}

.cabecalho__menu-hamburguer {
    width: 24px;
    height: 24px;
    background-image: url("../img/Menu.svg");
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    padding-left: 2.5em;
}

.cabecalho {
    background-color: var(--branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.container {
    display: flex;
    align-items: center;
}

.lista-menu {
    display: none;
    position: absolute;
    top: 100%;
    width: 60vw;
}

.container__botao:checked~.lista-menu{
    display: block;
}

.lista-menu__titulo, .lista-menu__item{
    padding: 1em;
    background-color: var(--branco);
}

.lista-menu__titulo{
    color: var(--laranja);
    font-weight: 700;
}

.lista-menu__link{
    background: var(--azul-degrade);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
}

.container__botao{
    display: none;
}

.container__titulo{
    display: none;
}

.opcoes{
    display: none;
}

.container__texto{
    display: none;
}

.container__botao:checked ~ .container__rotulo > .cabecalho__menu-hamburguer{
    background-image: url("../img/Frame\ 20.svg");
}

.container__botao:checked ~ .container__rotulo{
    background: var(--azul-degrade);
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá, Karoline! Tudo bem?

Pelo que entendi, você está enfrentando um problema com o menu hamburguer no seu projeto de responsividade com mobile-first. Ao clicar no menu, o background não está ocupando todo o espaço corretamente, de acordo com o design do Figma.

Uma possível solução para esse problema é adicionar a propriedade position: fixed ao elemento .cabecalho. Isso fará com que o cabeçalho fique fixo na parte superior da página e o background ocupe todo o espaço corretamente.

Você pode adicionar essa propriedade ao seletor .cabecalho no seu arquivo CSS, dessa forma:

.cabecalho {
    background-color: var(--branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed; /* Adicione essa linha */
    width: 100%; /* Adicione essa linha para ocupar toda a largura */
    z-index: 999; /* Adicione essa linha para garantir que o cabeçalho fique acima dos demais elementos */
}

Após adicionar essas linhas de código, o background do cabeçalho deve ocupar todo o espaço corretamente ao clicar no menu hamburguer, contudo se nada disso funcionar, então nesse caso para que eu possa lhe ajudar melhor eu vou precisar do seu projeto completo, incluindo o HTML, os arquivos CSS, talvez arquivos JavaScript caso você adicionou algum e principalmente, as imagens usadas no projeto.

Ah mas se você está só usando a API do carrosel no caso o SwiperJS então não precisa nenhum JavaScript (só HTML, CSS e Imagens tá), os arquivos JavaScript a API fornece direto pela WEB.

Isso tudo, claro, para que eu possa reproduzir o mesmo ambiente que o seu e testar tudo da melhor forma.

Para isso seria recomendado exportar o projeto para o GitHub. Mas se você não sabe fazer isso, não se preocupe, a instrutora Moni Hillman ensina de uma forma bem fácil como fazer isso nessa aula aqui.

Ah e os arquivos CSS como no curso temos um arquivo diferente para cada parte do site eu vou precisar de todos que você tiver aí, pois do contrário eu posso não reproduzir o ambiente igual ao seu e então eu posso acabar não sendo tão certeiro.

Então para uma ajuda mais personalizada e específica para o seu caso, eu peço que exporte o projeto para o Github, ou disponibilize os arquivos e informações necessárias para que eu reproduza seu projeto em minha máquina e faça os devidos testes para lhe ajudar da melhor forma.

E só para explicar, eu sei que você mandou boa parte do código por aqui, mas eu precise das imagens também sabe, pois ela tem uma papel fundamental nisso tudo. Por exemplo, com o tanto que código que você mandou eu tive esse resultado aqui:

imagem do projeto da aluna

Então para ajudar melhor o projeto completo tem mais garantia de eficiência.

Era isso, caso precise eu estarei por aqui!

Abraços! Bons estudos!

Mergulhe em programação