Cabeçalho transparente - mais simples

Compatibilidade: Dawn 2.0 e superior e temas GRATUITOS do Shopify 2.0

Você tem tema diferente? Envie-nos uma mensagem usando "Converse conosco"

Estou ciente de que alguns de vocês estão frustrados com meu outro código, então tornei um código mais fácil de seguir. Adicionei um código que calcularia o cabeçalho, que pode ser usado para medir o quanto trazemos o conteúdo. Torne o fundo do seu cabeçalho transparente com o código abaixo.

NOTA: Esteja atento à imagem de fundo e ajuste a cor da fonte de acordo.

O que você está comprando:

• O cabeçalho transparente funciona SOMENTE na página inicial
• Cabeçalho transparente compatível com dispositivos móveis
• O cabeçalho fixo ainda funcionará
• Talvez seja necessário alterar o esquema de cores, dependendo da imagem de fundo
• Edições simples e etapas fáceis de seguir

O que torna nosso código melhor:

• Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
• Não deixamos nem adicionamos códigos para anunciar em nosso site
• Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.

Para iniciar:

1. Vá para Admin store > Loja Online > Temas > Ações > Editar código.

2. Abra header.liquid na pasta Seções.

3. Cole o código abaixo, após a seção <noscript>.

{ % se modelo == 'índice' % }
 <estilo> _
 #Conteúdo principal {
 margem - topo : -115px ;
 }
 . transparente - cabeçalho {
 fundo : transparente ! importante ;
 } 
Tela @media somente e ( largura máxima : 950px ) {
 #Conteúdo principal {
 margem - topo : -65px ;
 }
 }
 </ estilo >
 <roteiro> _
 documento. addEventListener ( "DOMContentLoaded" , função ( e ) { 
const o = documento. querySelector ( ".header-wrapper" ) ;
 const n = novo ResizeObserver ( ( e ) => {
 const n = documento. querySelector ( ".seção-cabeçalho" ) ; 
const t = documento. querySelector ( "#MainContent" ) ;
 t. estilo . margemTop = "-" + n. alturadocliente + "px" ; 
janela. addEventListener ( "rolar" , ( e ) => {
 if ( janela. scrollY > 200 ) {
 ó. lista de classes . remover ( "cabeçalho transparente" ) ; 
} outro {
 ó. lista de classes . add ( "cabeçalho transparente" ) ;
 }
 } ) ;
 } ) ;
 n. observar ( o ) ;
 } ) ; 
</roteiro> _
 { % fim se % }

4. Em seguida, encontre o "header-wrapper" e cole o código abaixo próximo a ele. Faça com que haja um espaço entre as palavras.

Veja a imagem abaixo para posicionamento.

A fonte do menu não está legível? Altere o esquema de cores na seção do cabeçalho ao abrir o editor de temas. Nenhum código extra necessário para isso. Aconselhei usar o inverso.

Atualizado em 19/03/2023: Código customizado para funcionar também com a versão atualizada do Dawn 8.0

Atualizado em 02/08/2023: Código customizado para funcionar também com a versão atualizada do Dawn 11.0

É isso. Chega de DevTools (",)