Como fixar um menu horizontal no topo da janela ao rolar a página

Neste artigo você vai aprender a como fixar um menu horizontal no topo da janela ao rolar a página, de modo simples e apenas com CSS

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre menus, CSS e também posições de elementos!

Para começo do conversa é importante citar que não precisamos de JavaScript para fixar um menu, podemos fazer tudo com CSS simples

Porém há meios de fazer isso com JavaScript, o que eu não indico, apenas em situações que seja necessário

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

E como fixar o menu com CSS?

Vamos primeiramente adicionar a position de fixed, que fixa um elemento em alguma parte da tela

Depois podemos garantir que o mesmo fique no topo e alinhado para esquerda com as regras: top e left, com o valor de 0

E geralmente estes menus tem largura da tela toda, então podemos adicionar uma regra de width com 100%, e então nosso menu estará fixo e tudo estará posicionado corretamente

Veja o código completo:

<div id="menu"></div>

Aqui criamos o nosso HTML do menu, vou criar apenas uma estrutura mais simples possível para inserir o menu, ou seja, uma div

Agora veja o CSS:

#menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background-color: green;
}

Aqui também adicionei altura (height) e uma cor de fundo, para caso você copie o meu exemplo ele tome uma forma completa

Sendo assim, vai parecer um menu horizontal, é claro que sem os itens internos que você vai adicionar no seu

Viu como é simples fixar um menu? 🙂

Conclusão

Neste artigo aprendemos a como fixar um menu horizontal no topo da janela

Utilizamos apenas regras de CSS, como a position fixed, que a que faz toda a mágica

Fixando um elemento em alguma posição da tela, que definimos com top e left

Vimos também que a ação pode ser feita com JavaScript, mas não é indicado

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube