by Hi!
I’m working with a custom header for this site because the Astra’s theme tools are not as good as I’d like to. I’m still learning to code for web dev and this custom header on HTML is my major project so far.
I worked with Visual Studio Code and Google Chrome to visualize the header. I thought that the perfect plan was to get that HTML code into a “HTML block” in the Header Builder of Astra’s theme customization. I didn’t expect that the width would be limited by the block.
**My header only the HTML code:**
https://preview.redd.it/utzxl0x72zgb1.jpg?width=1280&format=pjpg&auto=webp&s=b94fa14910bcc4ff18efa230f0d37566477a78f5
**My header on the website inside a HTML block of the header builder:**
https://preview.redd.it/9t43ltau2zgb1.jpg?width=1280&format=pjpg&auto=webp&s=81e6f66097e0a81c0caa4a4ed8019c10b0348c3d
After doing some research I found some CSS code to “solve” this but it didn’t fixed it at all. It brings me more problems. I used the next code:
.ast-builder-html-element
width: 100vw;
**And now the header looks like this:**
https://preview.redd.it/9g39m78m3zgb1.jpg?width=1280&format=pjpg&auto=webp&s=353e40e49bea0532f8c962f5d4b73e660ae59e1e
The elements on the right side are gone and the “CONTACTO” block is moved a little bit to the bottom.
EDIT: I solved the “CONTACTO” moved to the bottom problem, it was caused by the <br> tags. I used CSS to delete them, so that problem is solved!
So… WHY?
I don’t know if there’s a problem with my HTML code or is a problem that comes for using a HTML block and I should do this in other way. I’m completely lost.
I would appreciate A LOT any help!!!
**I share my HTML code for the header:**
<html>
<head>
<script src=”https://kit.fontawesome.com/4d7716fb70.js” crossorigin=”anonymous”></script>
<style>
.cabecera-navbar-principal
overflow: hidden;
background-color: #fff;
font-family: Montserrat;
.cabecera-navbar-principal a
float: left;
font-size: 16px;
font-weight: 600;
color: #424242;
text-align: center;
padding: 15px 15px;
text-decoration: none;
.cabecera-dropdown
float: left;
overflow: hidden;
.cabecera-dropdown .cabecera-dropbtn
border: none;
outline: none;
color: #424242;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
font-weight: 600;
.cabecera-navbar-principal a:hover, .cabecera-dropdown:hover .cabecera-dropbtn
color: #003398;
.cabecera-dropdown-content
display: none;
position: absolute;
background-color: #fff;
width: 100%;
left: 0;
border-top: 2px solid #0080ff;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
.cabecera-dropdown:hover .cabecera-dropdown-content
display: block;
.cabecera-column
float: left;
width: 19%;
padding-left: 10px;
background-color: #fff;
height: 450px;
.cabecera-column a
float: none;
color: #424242;
text-decoration: none;
display: block;
text-align: left;
.columnas-marcas
float: left;
width: 100%;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 0px;
background-color: #fff;
height: 450px;
line-height: 0.1;
columns: 4;
.columnas-marcas a
float: none;
color: #424242;
text-decoration: none;
display: block;
text-align: left;
.cabecera-row:after
content: “”;
display: table;
clear: both;
.cabecera-categoria-padre
font-size: 1.17em !important;
font-weight: bold !important;
margin-top: 0.3em;
border-bottom: 1px solid #E3E3E3;
</style>
<body>
<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></button>
<div class=”cabecera-dropdown-content”>
<div class=”cabecera-row”>
<div class=”cabecera-column”>
<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”>AUDÍFONOS</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-column”>
<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/tablets”>TABLETS</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”>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-column”>
<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-row”>
<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”>ELEMENT</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”>GENÉRICO</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”>INNOVATIVE TECHNOLOGY</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”>MAJORITY</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”>SHARK</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”>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>
</body>
</head>
</html>
