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