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:**
**My header on the website inside a HTML block of the header builder:**
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:**
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>
Im on a phone and not looking through all that. But I’ve worked with astra so I have a couple thoughts off the top of my head.
1) what is the justification for replacing core WP functionality, like menu’s? You can style them however you want, but it’s all there out if the box. With and without astra. There’s no reason to write the HTML from scratch.
2) you’re gunna fight against astra a lot with this approach. You could ditch the “header builder” snd just replace the appropriate template file in a child theme with a lot less trouble.
3) if you insist on making *this* configuration work, start working your way up the dom. You need to wrangle the display of the container(s) first, before you will have predictable control over the contained elements. I don’t have class names off the top of my head, but there’s a group container with display flex, and then individual “column” type containers. Focus on those, not the individual elements inside them. But again you are going to be fighting against astra the entire time. A few custom “tweaks” is usually safe, but entirely overriding the layout can be sketchy.