Francileudo Oliveira
Francileudo Oliveira11/10/2022 08:57
Compartilhe
Curso HTML Developer
Recomendado para vocêFormação HTML Web Developer

Construindo um header fixo no topo com HTML e CSS

    Olá, seja muito bem vindo(a), no artigo de hoje iremos construir um cabeçalho simples em HTML e iremos aprender a deixá-lo fixo no topo. Inicialmente, no nosso HTML, teremos uma tag header e dentro dela colocaremos um título e um menu de navegação, o básico de um cabeçalho, para que possamos estilizar ele no CSS.

    <header>
    <h1>Título</h1>
    <nav>
     <ul>
      <li>HOME</li>
      <li>SOBRE</li>
      <li>BLOG</li>
     </ul>
    </nav>
     </header>
    

    Após isso, vamos colocar um sombreamento no header com o box-shadow, adicionar uma cor de fundo branca. Adicionaremos também, tanto no header quanto na tag ul, um display flexível, e dar um espaço entre eles juntamente com um padding para desgrudar eles da tela. Na nossa classe header, para fixar ele no topo usamos um position fixed, inicialmente, deixamos ele com o topo zero e uma largura de 100%.

    header {
     box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
     background: #fff;
     position: fixed;
     width: 100%;
     top: 0;
    }
    
    header, nav ul {
     display: flex;
     justify-content: space-between;
     padding: 1rem;
    }
    
    nav ul li {
     margin-left: 1rem;
    }
    

    Fixar um cabeçalho no topo da tela é bem simples e pode ser feito usando apenas o CSS, um abraço e até a próxima.

    Artigo original: https://francileudo-frontend.blogspot.com/2022/10/construindo-um-header-fixo-no-topo-com.html

    Compartilhe
    Recomendado para você
    • Curso JavaScript Developer
    • Curso CSS Developer
    • Curso UX Designer
    Comentários (6)
    Sabrina Pereira
    Sabrina Pereira - 11/10/2022 13:15

    Muito boa a explicação =)

    TR

    Thiago Ribeiro - 11/10/2022 10:14

    muito bom. vou fazer para praticar.

    Daniel Santos
    Daniel Santos - 11/10/2022 11:50

    Muito bom amigo, parabéns.

    🧠 Ciência da Computação | HTML5 | CSS3 | JavaScript | ReactJs
    Recomendado para vocêCurso HTML Developer