/* ══════════════════════════════════════════════════════════════════════ LA CABECERA EN ESCRITORIO — HerboMax TODO este archivo vive dentro de @media (min-width:1025px). Ni una regla base. En el telefono la cabecera no cambia en nada: ahi manda el cajon de menu de inc/menu.php, que ya esta aprobado. QUE HACE Reordena la cabecera de Woodmart en los TRES PISOS de la pagina que el dueno dio como referencia (flowsupplementscompany.com): piso 1 · la barra de anuncio (la dibuja Woodmart, arriba de todo) piso 2 · el logo CENTRADO, con los iconos a la derecha 96 px piso 3 · el menu CENTRADO 56 px Hoy es un solo piso de 90 px: logo a la izquierda, menu al centro, iconos a la derecha. COMO, SIN TOCAR EL HTML Woodmart arma ese piso con tres columnas dentro de un flex: .whb-row.whb-general-header > .container > .whb-flex-row > .whb-col-left (el logo) > .whb-col-center (el menu) > .whb-col-right (buscar y carro) Se le da flex-wrap:wrap al contenedor, las columnas izquierda y centro pasan a ocupar el 100% -- con lo que caen una debajo de la otra -- y la derecha se saca del flujo con position:absolute para que quede a la altura del logo. Cero marcado nuevo. MEDIDO EN EL SITIO VIVO, antes y despues de cada regla, en 375, 900, 1024, 1025 y 1440 px. POR QUE 1025 Y NO 900. Woodmart marca sus columnas de escritorio con la clase whb-visible-lg y las esconde por debajo de 1025 px: ahi dibuja la cabecera de celular. Con el corte en 900, entre 900 y 1024 esta hoja estiraba la banda a 152 px y la dejaba VACIA, porque las columnas que iban a llenarla estaban en display:none. Comprobado a 1024 (columnas escondidas) y a 1025 (columnas visibles, logo de 227 px). ══════════════════════════════════════════════════════════════════════ */ @media (min-width:1025px){ :root{ --hbx-cab-logo:96px; /* alto del piso del logo */ --hbx-cab-menu:56px; /* alto del piso del menu */ /* ── ESTA LINEA EVITA UN BRINCO DE 61 px AL CARGAR ─────────────── Woodmart calcula la altura total de la cabecera en :root, asi: --wd-header-h = barra superior + --wd-header-general-h + bordes Y su JavaScript, al terminar de cargar, le pone al
la clase whb-sticky-prepared, cuya unica regla es padding-top: var(--wd-header-h), sacando la banda del flujo. La altura nueva (152 px) se declaraba SOLO sobre la fila, no sobre :root. Asi que Woodmart seguia calculando con los 90 px viejos y reservaba 91 px de espacio para una cabecera que mide 152. Efecto para el cliente: la pagina termina de cargar, y una fraccion de segundo despues TODO EL CONTENIDO BRINCA 61 px hacia arriba; ya con el brinco hecho, la franja blanca del menu queda tapando los primeros 21 px de la pagina (el filo de la foto del hero, o el titulo en la tienda). Declarandola tambien aca, el calculo de Woodmart da 153 contra una banda de 152: 1 px, igual que en celular, y no se nota. Va dentro del @media de min-width, asi que el celular no cambia. */ --wd-header-general-h:152px; } /* ── la banda ────────────────────────────────────────────────────── El logo de HerboMax es blanco puro, asi que su piso va sobre morado; el menu se lee mejor en negro sobre blanco. CADA PISO LLEVA SU PROPIO FONDO. NO SE PINTA LA BANDA. La primera version pintaba la banda entera con un degradado de dos tramos -- morado los primeros 96 px, blanco el resto -- y le clavaba 152 px de alto a la fila. Eso se rompia al hacer scroll: Cuando la cabecera se queda pegada arriba, Woodmart DEVUELVE --wd-header-general-h a 90 px. Medido en el sitio vivo: en reposo la banda media 152 y pegada volvia a 90. Los dos pisos siguen midiendo 96 + 56 = 152, asi que el piso del menu SE DESBORDABA 62 px por debajo de la banda. Y como el blanco lo pintaba el degradado DE LA BANDA, el menu quedaba sin ningun fondo, flotando encima de las fotos de los productos. El dueno lo vio y mando la captura. Ahora el fondo lo lleva cada columna, no la banda, asi que da lo mismo que altura decida Woodmart: el piso del menu siempre viaja con su blanco pegado. Y la fila pasa a min-height en vez de height, para que pueda crecer en vez de desbordar. */ .whb-row.whb-general-header{ --wd-header-general-h:152px; background:var(--hbx-morado,#581fb6); } .whb-general-header .whb-flex-row{ position:relative; flex-wrap:wrap; align-items:stretch; /* min-height y NO height: si Woodmart la achica, la fila se queda en 152 en vez de recortar a sus hijos. max-height:none deshace el tope que trae el tema padre. */ height:auto; min-height:152px; max-height:none; } /* ── piso 2 · el logo ── */ /* margin-left:0 no es adorno: Woodmart le pone -10px a esta columna para pegarla al borde, y con el logo centrado eso lo dejaba 10 px corrido respecto del centro real de la pagina. Medido: con el -10px el centro del logo caia en 702 y el centro visual es 713. */ /* Lleva su morado propio, con el mismo truco de las dos sombras planas que el piso del menu. La banda ya es morada, asi que hoy no se nota; esta por si Woodmart cambia el fondo de la banda en algun estado (pegada, con promocion, con otro esquema de color). Con esto los dos pisos son independientes de lo que haga la banda, que es justo lo que fallo la primera vez. */ .whb-general-header .whb-col-left{ flex:0 0 100%; max-width:100%; margin-left:0; height:var(--hbx-cab-logo); justify-content:center; background:none; } /* ── los iconos, a la derecha del piso del logo ── */ /* Fuera del flujo: si se quedaran como tercera columna, el wrap los mandaria a un piso propio y la cabecera tendria cuatro. */ .whb-general-header .whb-col-right{ position:absolute; top:0; right:0; margin:0; height:var(--hbx-cab-logo); max-height:var(--hbx-cab-logo); justify-content:flex-end; } /* ── el separador fantasma que descentraba el menu ───────────────── Dentro de la columna del menu, el constructor de encabezados de Woodmart dejo un separador vacio de 70 px ANTES del menu. Servia en el diseno viejo de un solo piso, para despegar el menu del logo que iba a la izquierda. Con el menu ya centrado en su propio piso, ese hueco se centra JUNTO con el menu: el conjunto [70 px vacios + menu] queda centrado, y por lo tanto el menu solo queda 35 px corrido a la derecha del centro de la pagina, desalineado con el logo de arriba. Se anula por CSS y no borrandolo del constructor a proposito: si algun dia el dueno rearma la cabecera desde el panel y el separador vuelve a aparecer, esta regla lo sigue tapando sola. */ .whb-general-header .whb-col-center .whb-space-element{ display:none; } /* ── piso 3 · el menu ── */ /* El blanco a sangre completa con dos sombras planas, una a cada lado. Es el truco clasico: box-shadow no ocupa espacio ni afecta al layout, asi que pinta el ancho entero de la pantalla sin sacar la columna de su sitio ni obligar a un
nuevo. Se pinta por encima del fondo de la banda y por debajo del texto del menu, que es justo donde tiene que ir. Va en la columna y no en la banda a proposito: asi el blanco viaja pegado al menu pase lo que pase con la altura de la banda al hacer scroll. */ .whb-general-header .whb-col-center{ flex:0 0 100%; max-width:100%; margin:0; height:var(--hbx-cab-menu); justify-content:center; background:none; } /* ── el color del menu ───────────────────────────────────────────── Con los dos pisos morados, el menu va en blanco. COMO SE LE CAMBIA EL COLOR AL MENU. Vale dejarlo escrito porque ya costo dos vueltas y lo que estaba escrito aca antes era FALSO: decia que habia que cambiar la variable --nav-color, y que el color del enlace "no se podia cambiar". Las dos cosas son mentira, y por creerlas la barra compacta se dejo blanca en su momento. Lo que pasaba de verdad es mas simple, y es una regla basica de CSS que conviene tener presente para no volver a perder el tiempo: UNA REGLA PUESTA SOBRE EL PROPIO ELEMENTO SIEMPRE LE GANA AL COLOR HEREDADO DE UN ANTECESOR, POR ESPECIFICO QUE SEA EL ANTECESOR. Woodmart pinta el enlace con una regla sobre el propio . Por eso nada de lo que se intentaba servia: se estaba pintando siempre un contenedor -- la columna, el