Categorias: CSS

Tags: Cabeçalho

Cabeçalho Fixo – Antigo

Escrito por Amanda de Lavra

22 de dezembro de 2019

O novo Divi Theme Builder permite criar cabeçalhos com qualquer módulo existente e isso traz muita versatilidade na construção de sites. Porém, ainda não há uma opção dentro do próprio theme builder para que o cabeçalho fique fixo ao rolar a página.

Para fazer isso, é necessário incluir o seguinte código CSS (aba Avançado > Customize CSS) ao elemento principal da sessão que deve ficar fixa:

position: fixed;
width: 100%;
top: 0;

Um problema enfrentado, é que alguns layouts usam mais de uma sessão na sua construção. Nesse caso, é necessário que apenas uma sessão fique fixa ou que o layout seja ajustada para usar apenas uma sessão.

Atualização em 18/01/2020:

Com a nova atualização do Divi (4.2), agora é possível colocar qualquer elemento como fixo, não sendo necessário código adicional para isso.

Posts relacionados

Customizações da página de login e painel administrativo do WordPress

Customizações da página de login e painel administrativo do WordPress

Para todo o site que eu faço, personalizo a página de login e também o wp-admin para ficar com a marca do cliente. Recentemente, aperfeiçoei o código para que o login ficasse no meio da página, tanto verticalmente quanto horizontalmente. Segue código usado aqui neste...

Botão Leia Mais no Elementor

Botão Leia Mais no Elementor

O site do cliente tinham alguns textos que eram muito extensos e, num layout de coluna, variavam muito de tamanho. Decidi adaptar o que já havia feito no Divi, ao incluir um botão Leia Mais (https://blog.amandadelavra.com.br/modulo-texto-com-botao-leia-mais/), mas...

Como manter a proporção de um elemento com CSS

Como manter a proporção de um elemento com CSS

Me pediram para colocar um elemento flutuante no site com o preço de cada produto. Como os preços variam de acordo com o produto, eu não podia ajustar com padding apenas para que ficasse redondinho na proporção 1:1. Para isso, usei a propriedade do CSS aspect-ratio....