Primera vez que uso un bloque HTML para un encabezado personalizado y no se ve bien, ¡ayuda por favor!

Publicado: 2023-08-09

¡Hola!

Estoy trabajando con un encabezado personalizado para este sitio porque las herramientas temáticas de Astra no son tan buenas como me gustaría. Todavía estoy aprendiendo a codificar para desarrollo web y este encabezado personalizado en HTML es mi proyecto principal hasta ahora.

Trabajé con Visual Studio Code y Google Chrome para visualizar el encabezado. Pensé que el plan perfecto era colocar ese código HTML en un “bloque HTML” en el Generador de encabezados de personalización del tema de Astra. No esperaba que el ancho estuviera limitado por el bloque.

**Mi encabezado solo es el código HTML:**

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

**Mi encabezado en el sitio web dentro de un bloque HTML del generador de encabezados:**

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

Después de investigar un poco, encontré un código CSS para "resolver" esto, pero no lo solucionó en absoluto. Me trae más problemas. Usé el siguiente código:

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

**Y ahora el encabezado se ve así:**

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

Los elementos del lado derecho desaparecieron y el bloque “CONTACTO” se movió un poco hacia abajo.

EDITAR: Resolví el problema de "CONTACTO" movido al final, fue causado por las etiquetas <br>. Usé CSS para eliminarlos, ¡así que el problema está resuelto!

¿Entonces por qué?

No sé si hay algún problema con mi código HTML o es un problema que viene por usar un bloque HTML y debería hacerlo de otra manera. Estoy completamente perdido.

¡¡¡Agradecería MUCHA ayuda!!!

**Comparto mi código HTML para el encabezado:**

<html>
<cabeza>
<script src=”https://kit.fontawesome.com/4d7716fb70.js” crossorigin=”anonymous”></script>
<estilo>
.cabecera-navbar-principal
desbordamiento: oculto;
color de fondo: #fff;
familia de fuentes: Montserrat;

.cabecera-navbar-principal a
flotador izquierdo;
tamaño de fuente: 16px;
peso de fuente: 600;
color: #424242;
alineación de texto: centro;
relleno: 15px 15px;
decoración de texto: ninguna;

.cabecera-desplegable
flotador izquierdo;
desbordamiento: oculto;

.cabecera-dropdown
borde: ninguno;
esquema: ninguno;
color: #424242;
relleno: 14px 16px;
color de fondo: heredar;
fuente: heredar;
margen: 0;
peso de fuente: 600;

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

.cabecera-contenido-desplegable
pantalla: ninguna;
posición: absoluta;
color de fondo: #fff;
ancho: 100%;
izquierda: 0;
borde superior: 2px sólido #0080ff;
sombra de cuadro: 0px 8px 16px 0px rgba(0,0,0,0.2);
índice z: 1;

.cabecera-dropdown:hover .cabecera-dropdown-content
bloqueo de pantalla;

.cabecera-columna
flotador izquierdo;
ancho: 19%;
relleno-izquierda: 10px;
color de fondo: #fff;
altura: 450 px;

.cabecera-columna a
flotador: ninguno;
color: #424242;
decoración de texto: ninguna;
bloqueo de pantalla;
alineación de texto: izquierda;

.columnas-marcas
flotador izquierdo;
ancho: 100%;
relleno-izquierda: 20px;
relleno-derecha: 20px;
relleno superior: 20px;
fondo de relleno: 0px;
color de fondo: #fff;
altura: 450 px;
altura de línea: 0,1;
columnas: 4;

.columnas-marcas a
flotador: ninguno;
color: #424242;
decoración de texto: ninguna;
bloqueo de pantalla;
alineación de texto: izquierda;

.cabecera-row:después
contenido: "";
pantalla: mesa;
Limpia los dos;

.cabecera-categoria-padre
tamaño de fuente: 1,17 em! importante;
peso de fuente: negrita! Importante;
margen superior: 0,3 em;
borde inferior: 1px sólido #E3E3E3;

</estilo>
<cuerpo>
<div class="cabecera-navbar-principal">
<div class="cabecera-dropdown">
<button class=”cabecera-dropbtn” onclick=”window.location.href='/productos'”>PRODUCTOS <i class=”fa-sharp fa-solid fa-chevron-down” style=”color: #424242; ”></i></botón>
<div class="cabecera-dropdown-content">
<div class="cabecera-fila">
<div class=”cabecera-columna”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/audio”>AUDIO</a>
<a href=”/categoria-producto/audio/accesorios-audio”>ACCESORIOS</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 AUDIO</a>
</div>
<div class=”cabecera-columna”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/electronica”>ELECTRÓ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/tabletas”>TABLETAS</a>
</div>
<div class=”cabecera-columna”>
<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-columna”>
<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”>PARRILLAS</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-columna”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/video”>VIDEO</a>
<a href="/categoria-producto/video/accesorios-video">ACCESORIOS</a>
<a href=”/categoria-producto/video/pantallas”>PANTALLAS</a>
<a href=”/categoria-producto/video/reproductores-dvd”>REPRODUCTORES 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="cabecera-dropdown-content">
<div class="cabecera-fila">
<div class="columnas-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”>BACKYARD GRILL</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”>TECNOLOGÍA INNOVADORA</a>
<a href=”/categoria-producto/marca/instant-vortex”>INSTANT VORTEX</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”>MAJORIDAD</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”>TIBURÓN</a>
<a href=”/categoria-producto/marca/sony”>SONY</a>
<a href="/categoria-producto/marca/speedy-cook">COCCIÓN RÁPIDA</a>
<a href=”/categoria-producto/marca/steelpro”>STEELPRO</a>
<a href=”/categoria-producto/marca/tcl”>TCL</a>
<a href=”/categoria-producto/marca/venturer”>VENTURER</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”>CONTACTO</a>
</div>
</cuerpo>
</cabeza>
</html>