• Pagina inicial
  • Artigos
  • Tema
  • Primeira vez que uso o bloco HTML para um cabeçalho personalizado e não parece bom, ajude, por favor!

Primeira vez que uso o bloco HTML para um cabeçalho personalizado e não parece bom, ajude, por favor!

Publicados: 2023-08-09

Oi!

Estou trabalhando com um cabeçalho personalizado para este site porque as ferramentas de tema do Astra não são tão boas quanto eu gostaria. Ainda estou aprendendo a codificar para web dev e esse cabeçalho personalizado em HTML é meu principal projeto até agora.

Trabalhei com Visual Studio Code e Google Chrome para visualizar o cabeçalho. Achei que o plano perfeito era colocar esse código HTML em um “bloco HTML” no Header Builder da personalização do tema do Astra. Não esperava que a largura fosse limitada pelo bloco.

**Meu cabeçalho apenas o código HTML:**

https://preview.redd.it/utzxl0x72zgb1.jpg?width=1280&format=pjpg&auto=webp&s=b94fa14910bcc4ff18efa230f0d37566477a78f5

**Meu cabeçalho no site dentro de um bloco HTML do construtor de cabeçalho:**

https://preview.redd.it/9t43ltau2zgb1.jpg?width=1280&format=pjpg&auto=webp&s=81e6f66097e0a81c0caa4a4ed8019c10b0348c3d

Depois de fazer algumas pesquisas, encontrei um código CSS para “resolver” isso, mas não resolveu nada. Isso me traz mais problemas. Usei o próximo código:

.ast-builder-html-elemento
largura: 100vw;

**E agora o cabeçalho fica assim:**

https://preview.redd.it/9g39m78m3zgb1.jpg?width=1280&format=pjpg&auto=webp&s=353e40e49bea0532f8c962f5d4b73e660ae59e1e

Os elementos do lado direito desapareceram e o bloco “CONTACTO” foi movido um pouco para baixo.

EDIT: Resolvi o problema do “CONTACTO” movido para o fundo, era causado pelas tags <br>. Usei CSS para excluí-los, então esse problema está resolvido!

Então por que?

Não sei se há algum problema com meu código HTML ou se é um problema relacionado ao uso de um bloco HTML e devo fazer isso de outra maneira. Estou completamente perdido.

Eu apreciaria MUITO qualquer ajuda!!!

**Compartilho meu código HTML para o cabeçalho:**

<html>
<cabeça>
<script src=”https://kit.fontawesome.com/4d7716fb70.js” crossorigin=”anonymous”></script>
<estilo>
.cabecera-navbar-principal
estouro: oculto;
cor de fundo: #fff;
família de fontes: Montserrat;

.cabecera-navbar-principal a
flutuar: esquerda;
tamanho da fonte: 16px;
peso da fonte: 600;
cor: #424242;
alinhamento de texto: centro;
preenchimento: 15px 15px;
decoração de texto: nenhuma;

.cabecera-suspenso
flutuar: esquerda;
estouro: oculto;

.cabecera-dropdown .cabecera-dropbtn
fronteira: nenhuma;
esboço: nenhum;
cor: #424242;
preenchimento: 14px 16px;
cor de fundo: herdar;
fonte: herdar;
margem: 0;
peso da fonte: 600;

.cabecera-navbar-principal a:hover, .cabecera-dropdown:hover .cabecera-dropbtn
cor: #003398;

.cabecera-dropdown-content
Mostrar nenhum;
posição: absoluta;
cor de fundo: #fff;
largura: 100%;
esquerda: 0;
borda superior: 2px sólido #0080ff;
sombra da caixa: 0px 8px 16px 0px rgba (0,0,0,0,2);
índice z: 1;

.cabecera-dropdown:hover .cabecera-dropdown-content
exibição: bloco;

.cabecera-coluna
flutuar: esquerda;
largura: 19%;
preenchimento à esquerda: 10px;
cor de fundo: #fff;
altura: 450px;

.cabecera-coluna a
flutuar: nenhum;
cor: #424242;
decoração de texto: nenhuma;
exibição: bloco;
alinhamento de texto: esquerda;

.colunas-marcas
flutuar: esquerda;
largura: 100%;
preenchimento à esquerda: 20px;
preenchimento à direita: 20px;
preenchimento superior: 20px;
preenchimento inferior: 0px;
cor de fundo: #fff;
altura: 450px;
altura da linha: 0,1;
colunas: 4;

.colunas-marcas a
flutuar: nenhum;
cor: #424242;
decoração de texto: nenhuma;
exibição: bloco;
alinhamento de texto: esquerda;

.cabecera-row:depois
contente: "";
exibição: mesa;
limpar ambos;

.cabecera-categoria-padre
tamanho da fonte: 1,17em !importante;
peso da fonte: negrito! Importante;
margem superior: 0,3em;
borda inferior: 1px sólido #E3E3E3;

</estilo>
<corpo>
<div class=”cabecera-navbar-principal”>
<div class=”cabecera-dropdown”>
<button class=”cabecera-dropbtn” onclick=”window.location.href='/productos'”>PRODUTOS <i class=”fa-sharp fa-solid fa-chevron-down” style=”color: #424242; ”></i></botão>
<div class=”cabeça-dropdown-content”>
<div class=”cabecera-row”>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/audio”>ÁUDIO</a>
<a href=”/categoria-producto/audio/accesorios-audio”>ACESSÓRIOS</a>
<a href=”/categoria-producto/audio/audifonos”>AUDIFONOS</a>
<a href=”/categoria-producto/audio/barras-de-sonido”>BARRAS DE SONIDO</a>
<a href=”/categoria-producto/audio/bocinas”>BOCINAS</a>
<a href=”/categoria-producto/audio/sistemas-de-audio”>SISTEMAS DE ÁUDIO</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/electronica”>ELETRÔNICA</a>
<a href=”/categoria-producto/electronica/accesorios-electronica”>ACCESORIOS</a>
<a href=”/categoria-producto/electronica/consolas”>CONSOLAS</a>
<a href=”/categoria-producto/electronica/drones”>DRONES</a>
<a href=”/categoria-producto/electronica/tablets”>COMPRIMIDOS</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/hogar”>HOGAR</a>
<a href=”/categoria-producto/hogar/calentadores”>CALENTADORES</a>
<a href=”/categoria-producto/hogar/colchones”>COLCHONES</a>
<a href=”/categoria-producto/hogar/planchas-vapor-aspiradoras”>PLANCHAS DE VAPOR / ASPIRADORAS</a>
<a href=”/categoria-producto/hogar/ventiladores”>VENTILADORES</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/linea-blanca”>LINEA BLANCA</a>
<a href=”/categoria-producto/linea-blanca/cafeteras”>CAFETERAS</a>
<a href=”/categoria-producto/linea-blanca/congeladores”>CONGELADORES</a>
<a href=”/categoria-producto/linea-blanca/freidoras-hornos”>FREIDORAS / HORNOS</a>
<a href=”/categoria-producto/linea-blanca/licuadoras”>LICUADORAS</a>
<a href=”/categoria-producto/linea-blanca/parrillas”>PARRILHAS</a>
<a href=”/categoria-producto/linea-blanca/procesador-alimentos-ollas”>PROCESADOR DE ALIMENTOS / OLLAS</a>
<a href=”/categoria-producto/linea-blanca/tostadoras”>TOSTADORAS</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/video”>VÍDEO</a>
<a href=”/categoria-producto/video/accesorios-video”>ACESSÓRIOS</a>
<a href=”/categoria-producto/video/pantallas”>PANTALLAS</a>
<a href=”/categoria-producto/video/reproductores-dvd”>REPRODUTORES DVD</a>
</div>
</div>
</div>
</div>
<div class=”cabecera-dropdown”>
<button class=”cabecera-dropbtn”>MARCAS <i class=”fa-sharp fa-solid fa-chevron-down” style=”color: #424242;”></i></button>
<div class=”cabeça-dropdown-content”>
<div class=”cabecera-row”>
<div class=”colunas-marcas”>
<a href=”/categoria-producto/marca/aiwa”>AIWA</a>
<a href=”/categoria-producto/marca/altec-lansing”>ALTEC LANSING</a>
<a href=”/categoria-producto/marca/alux”>ALUX</a>
<a href=”/categoria-producto/marca/arctic-king”>ARCTIC KING</a>
<a href=”/categoria-producto/marca/aroma”>AROMA</a>
<a href=”/categoria-producto/marca/atvio”>ATVIO</a>
<a href=”/categoria-producto/marca/backyard-grill”>GRELHADOR DE QUINTAL</a>
<a href=”/categoria-producto/marca/beautyrest”>BEAUTYREST</a>
<a href=”/categoria-producto/marca/black-n-decker”>BLACK & DECKER</a>
<a href=”/categoria-producto/marca/blackweb”>BLACKWEB</a>
<a href=”/categoria-producto/marca/element”>ELEMENTO</a>
<a href=”/categoria-producto/marca/elite”>ELITE</a>
<a href=”/categoria-producto/marca/emeril-lagasse”>EMERIL LAGASSE</a>
<a href=”/categoria-producto/marca/farberware”>FARBERWARE</a>
<a href=”/categoria-producto/marca/ge”>GE</a>
<a href=”/categoria-producto/marca/generico”>GENERICO</a>
<a href=”/categoria-producto/marca/hamilton-beach”>HAMILTON BEACH</a>
<a href=”/categoria-producto/marca/hisense”>HISENSE</a>
<a href=”/categoria-producto/marca/hunterspider”>HUNTERSPIDER</a>
<a href=”/categoria-producto/marca/innovative-technology”>TECNOLOGIA INOVADORA</a>
<a href=”/categoria-producto/marca/instant-vortex”>VÓRTEX INSTANTÂNEO</a>
<a href=”/categoria-producto/marca/jungletac”>JUNGLETAC</a>
<a href=”/categoria-producto/marca/kvision”>K-VISION</a>
<a href=”/categoria-producto/marca/kempler-n-strauss”>KEMPLER & STRAUSS</a>
<a href=”/categoria-producto/marca/lg”>LG</a>
<a href=”/categoria-producto/marca/majority”>MAIORIA</a>
<a href=”/categoria-producto/marca/maximatic”>MAXIMATIC</a>
<a href=”/categoria-producto/marca/microsoft”>MICROSOFT</a>
<a href=”/categoria-producto/marca/momentum”>MOMENTUM</a>
<a href=”/categoria-producto/marca/ninja”>NINJA</a>
<a href=”/categoria-producto/marca/nutribullet”>NUTRIBULLET</a>
<a href=”/categoria-producto/marca/onn”>ONN</a>
<a href=”/categoria-producto/marca/pelonis”>PELONIS</a>
<a href=”/categoria-producto/marca/powerxl”>POWERXL</a>
<a href=”/categoria-producto/marca/rca”>RCA</a>
<a href=”/categoria-producto/marca/ridgeway”>RIDGEWAY</a>
<a href=”/categoria-producto/marca/rival”>RIVAL</a>
<a href=”/categoria-producto/marca/samsung”>SAMSUNG</a>
<a href=”/categoria-producto/marca/shark”>TUBARÃO</a>
<a href=”/categoria-producto/marca/sony”>SONY</a>
<a href=”/categoria-producto/marca/speedy-cook”>SPEEDY COOK</a>
<a href=”/categoria-producto/marca/steelpro”>STEELPRO</a>
<a href=”/categoria-producto/marca/tcl”>TCL</a>
<a href=”/categoria-producto/marca/venturer”>EMPREENDEDOR</a>
<a href=”/categoria-producto/marca/vissani”>VISSANI</a>
<a href=”/categoria-producto/marca/vivitar”>VIVITAR</a>
<a href=”/categoria-producto/marca/vizio”>VIZIO</a>
<a href=”/categoria-producto/marca/westinghouse”>WESTINGHOUSE</a>
</div>
</div>
</div>
</div>
<a href=”/ayuda”>AYUDA</a>
<a href=”/contacto”>CONTATO</a>
</div>
</body>
</head>
</html>