/* Avdelningsnavigeringen i parts/header.html.
Byggd på core/navigation — ingen egen markup, ingen plugin. Menyn är
därmed redigerbar i Webbplatsredigeraren. Enda JS:en är mobilmenyn
(assets/js/mobilmeny.js).
Baren följer designkällan (Elagentenbutik Startsida.dc.html, sektionen
"Kategorinavigering"). Megamenypanelen finns inte i designen; den är byggd
efter patterns/wordpress-fse/megameny-i-core-navigation-block, som också
förklarar selektorerna nedan.
Brytpunkt 900 px: över den ligger baren med hover-paneler, under den en
egen utfällbar meny under headern (hamburgare i headerraden + dragspel per
avdelning). Core:s overlay är avstängd, se sista blocket. */
/* ---------------------------------------------------------------- baren */
/* Designens kategoribar har ingen egen vertikal padding — länkarna bär den
(12px 16px). WP lägger annars root-paddingen på gruppen, vilket både gör
baren högre än designen och skjuter megapanelen nedåt: panelen positioneras
mot gruppen, så allt under navigeringen blir ett glapp. */
.wp-block-group.alignfull:has(.eb-kategorinav) {
padding-top: 0;
padding-bottom: 0;
padding-left: 20px;
padding-right: 20px;
}
/* WooCommerce lägger själv in Kundkonto- och Varukorg-blocken sist i headerns
malldel — de finns inte i parts/header.html. Filtreras bort med
hooked_block_types i functions.php; det här är reserven. Designen har ingen
kontoikon, och varukorgen togs bort ur headern 2026-09-28. */
.wp-block-group.alignfull:has(.eb-kategorinav) .wp-block-woocommerce-customer-account,
.wp-block-group.alignfull:has(.eb-kategorinav) .wp-block-woocommerce-mini-cart {
display: none;
}
@media (min-width: 900px) {
.eb-kategorinav .wp-block-navigation-item__content {
display: block;
padding: 12px 16px;
font-family: "Josefin Sans", sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
}
/* core sätter .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
{ color: inherit } — tre klasser (dubblad __content), vinner över en enkel
.eb-kategorinav .content-regel. Samma familj som
patterns/wordpress-fse/core-navigation-block-selectors-beat-single-class-override,
löst likadant: matcha/slå specificiteten i stället för att bara sätta färgen en gång. */
.eb-kategorinav .wp-block-navigation-item__content.wp-block-navigation-item__content {
color: var(--wp--preset--color--base-alt);
}
.eb-kategorinav .wp-block-navigation__container > .wp-block-navigation-item {
border-right: 1px solid rgba(232, 227, 213, 0.18);
border-bottom: 1px solid rgba(232, 227, 213, 0.12);
}
/* Ingen chevron på avdelningarna med panel — panelen öppnas på hover och
:focus-within ändå, pilen var bara brus i baren. */
.eb-kategorinav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
display: none !important;
}
/* avdelningen behåller markeringen medan panelen är hovrad */
.eb-kategorinav .wp-block-navigation__container > .wp-block-navigation-item:hover,
.eb-kategorinav .wp-block-navigation__container > .wp-block-navigation-item:focus-within {
background: var(--wp--preset--color--secondary);
}
.eb-kategorinav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.eb-kategorinav .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.eb-kategorinav .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-icon,
.eb-kategorinav .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-icon {
color: var(--wp--preset--color--contrast);
}
/* Kampanjer — accentlänken sist, ur designen */
.eb-kategorinav .wp-block-navigation__container > .eb-nav-kampanj {
background: var(--wp--preset--color--base);
border-right: 0;
}
.eb-kategorinav .wp-block-navigation__container > .eb-nav-kampanj > .wp-block-navigation-item__content {
color: var(--wp--preset--color--accent);
font-weight: 700;
}
.eb-kategorinav .wp-block-navigation__container > .eb-nav-kampanj:hover,
.eb-kategorinav .wp-block-navigation__container > .eb-nav-kampanj:focus-within {
background: var(--wp--preset--color--accent);
}
.eb-kategorinav .wp-block-navigation__container > .eb-nav-kampanj:hover > .wp-block-navigation-item__content,
.eb-kategorinav .wp-block-navigation__container > .eb-nav-kampanj:focus-within > .wp-block-navigation-item__content {
color: var(--wp--preset--color--base);
}
/* ------------------------------------------------------ megapanelen */
/* Panelen positioneras mot headergruppen, inte mot sitt . Core lägger
`top: 100%` på undermenyn, så referensen måste vara den alignfull-grupp
som bär navigeringen — annars hamnar panelen mot viewporten. */
.wp-block-group.alignfull:has(.eb-kategorinav) {
position: relative;
z-index: 50;
}
/* Temats egen constrained-grupp runt navigeringen får `position: relative`
av WP:s layoutstilar och skulle annars klippa panelen till 1360 px. */
.wp-block-group.alignfull:has(.eb-kategorinav) .wp-block-group,
.eb-kategorinav,
.eb-kategorinav .wp-block-navigation__responsive-container,
.eb-kategorinav .wp-block-navigation__responsive-close,
.eb-kategorinav .wp-block-navigation__responsive-dialog,
.eb-kategorinav .wp-block-navigation__responsive-container-content,
.eb-kategorinav .wp-block-navigation__container,
.eb-kategorinav .wp-block-navigation__container > .has-child {
position: static !important;
}
/* överbryggar 1 px-glappet som gruppens nederkant lämnar, annars tappas
hovern på vägen ner till panelen */
.eb-kategorinav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 10px;
}
.eb-kategorinav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
top: 100% !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
min-width: 0;
box-sizing: border-box;
display: grid !important;
/* kolumn 1 = vänsterkolumnen (avdelning + Visa allt), sedan fyra kolumner
underkategorier fyllda radvis (vänster → höger) som i referensbilden */
grid-template-columns: 220px repeat(4, minmax(0, 1fr));
grid-auto-flow: row;
align-items: start;
column-gap: 32px;
/* 0, inte 2px: vänsterkolumnen spänner över 30 implicita rader (se
.eb-nav-panelhead) och tomma rader får då ingen höjd av gapet */
row-gap: 0;
padding: 28px max(20px, calc((100% - 1360px) / 2)) 32px !important;
z-index: 1000 !important;
/* core kopierar navigeringens färgklasser till undermenyn, och WP:s
preset-klasser sätter dem med !important — panelen blir annars mörk */
background: var(--wp--preset--color--base) !important;
color: var(--wp--preset--color--contrast) !important;
border: 0 !important;
border-top: 1px solid var(--wp--preset--color--secondary) !important;
border-radius: 0 !important;
box-shadow: inset 0 14px 22px -20px rgba(20, 20, 15, 0.45), 0 10px 16px -12px rgba(20, 20, 15, 0.2);
}
/* Hover-avsikt. Baren radbryter i två rader och panelen ligger under båda,
så från en avdelning på översta raden passerar musen ~47 px av den undre
raden — utan fördröjning byts eller stängs panelen på vägen. Panelen
stängs därför först efter 300 ms och öppnas efter 150 ms (en avdelning
man bara passerar hinner inte öppna sin). Synligheten styrs bara härifrån:
core stänger annars direkt via :hover och sitt aria-expanded-läge, och
nollar samtidigt höjden, vilket skulle klippa panelen under fördröjningen. */
.eb-kategorinav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
height: auto !important;
overflow: visible !important;
visibility: hidden !important;
opacity: 0 !important;
transition: visibility 0s linear 0.3s, opacity 0s linear 0.3s !important;
}
.eb-kategorinav .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-container,
.eb-kategorinav .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-container {
visibility: visible !important;
opacity: 1 !important;
transition-delay: 0.15s !important;
/* den som öppnas ligger över den som håller på att stänga */
z-index: 1001 !important;
}
/* tangentbord: ingen fördröjning */
.eb-kategorinav .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-container {
transition-delay: 0s !important;
}
/* Escape stänger panelen fast fokus eller musen är kvar på avdelningen
(WCAG 1.4.13). Klassen sätts och tas bort av assets/js/mobilmeny.js. */
.eb-kategorinav .wp-block-navigation__container > .has-child.eb-panel-stangd > .wp-block-navigation__submenu-container {
visibility: hidden !important;
opacity: 0 !important;
transition-delay: 0s !important;
}
.eb-kategorinav .wp-block-navigation__submenu-container .wp-block-navigation-item {
display: block;
background: transparent !important;
}
/* nivå 2 med barn = kolumnrubrik */
.eb-kategorinav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation-item__content {
padding: 0 0 7px;
margin-bottom: 4px;
font-family: "Josefin Sans", sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--contrast);
border-bottom: 1px solid var(--wp--preset--color--secondary-light);
}
/* alla vanliga länkar i panelen (utom vänsterkolumnen, se .eb-nav-panelhead) */
.eb-kategorinav .wp-block-navigation__submenu-container .wp-block-navigation-item:not(.has-child):not(.eb-nav-panelhead) > .wp-block-navigation-item__content {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 4px;
border-bottom: 1px solid rgba(42, 51, 39, 0.14);
font-family: Karla, sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.25;
letter-spacing: 0;
text-transform: none;
white-space: normal;
color: var(--wp--preset--color--contrast);
}
.eb-kategorinav .wp-block-navigation__submenu-container .wp-block-navigation-item:not(.has-child):not(.eb-nav-panelhead) > .wp-block-navigation-item__content::before {
content: "";
flex: 0 0 auto;
width: 5px;
height: 5px;
background: var(--wp--preset--color--secondary);
border-radius: 50%;
}
.eb-kategorinav .wp-block-navigation__submenu-container .wp-block-navigation-item:not(.eb-nav-panelhead) > .wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--primary);
background: #efeadc;
}
/* ---- vänsterkolumnen: AVDELNING / avdelningsnamn / Visa allt-knapp ----
Genererad av CSS runt en enda riktig länk (avdelningens egen), så hela
kolumnen är EN klickyta i stället för tre — bättre för både städ och
WCAG 2.5.5 (större träffyta) än tre separata mikrolänkar. */
.eb-kategorinav .wp-block-navigation__submenu-container > .eb-nav-panelhead {
grid-column: 1;
/* 1 / -1 spänner bara explicita rader, och radflödet har inga */
grid-row: 1 / span 30;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding-right: 28px;
border-right: 1px solid rgba(42, 51, 39, 0.22);
}
.eb-kategorinav .wp-block-navigation__submenu-container > .eb-nav-panelhead::before {
content: "Avdelning";
order: 1;
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wp--preset--color--secondary-dark);
}
.eb-kategorinav .wp-block-navigation__submenu-container > .eb-nav-panelhead > .wp-block-navigation-item__content {
order: 2;
/* static, inte relative: annars förankras strecklänkens ::before (nedan)
mot länken själv och täcker bara namnet — "Visa allt" blev oklickbar */
position: static !important;
padding: 0 !important;
font-family: "Josefin Sans", sans-serif;
font-weight: 700;
font-size: 26px;
line-height: 1.05;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: normal;
color: var(--wp--preset--color--contrast);
}
/* strecklänk: hela vänsterkolumnen (eyebrow + rubrik + knapp) blir en
klickyta, ankrad mot .eb-nav-panelhead ovan som är position:relative */
.eb-kategorinav .wp-block-navigation__submenu-container > .eb-nav-panelhead > .wp-block-navigation-item__content::before {
content: "";
position: absolute;
inset: 0;
}
.eb-kategorinav .wp-block-navigation__submenu-container > .eb-nav-panelhead::after {
content: "Visa allt →";
order: 3;
align-self: flex-start;
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base);
padding: 10px 16px;
border-radius: var(--wp--custom--radius--md);
font-family: "Josefin Sans", sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.eb-kategorinav .wp-block-navigation__submenu-container > .eb-nav-panelhead:hover::after {
background: var(--wp--preset--color--contrast);
}
/* nivå 3 syns direkt, ingen egen dropdown */
.eb-kategorinav .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container {
position: static !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
min-width: 0 !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
background: transparent !important;
}
.eb-kategorinav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
display: none !important;
}
}
/* Mobilmenyns delar (assets/js/mobilmeny.js) finns bara under 900 px */
@media (min-width: 900px) {
.eb-menyknapp,
.eb-kategorinav .eb-nav-toggle,
.eb-kategorinav .eb-nav-visahela {
display: none !important;
}
}
/* --------------------------------------------- mobil: dragspel under headern
Core:s overlay är avstängd ("overlayMenu":"never"). Hamburgaren i headerraden
fäller ut navet på plats under headern, och varje avdelning med
underkategorier öppnas med sin +/−-knapp. Allt fälls bara ihop under
html.eb-mobilmeny, som skriptet sätter — utan JS syns listan utfälld. */
@media (max-width: 899px) {
.eb-menyknapp {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid var(--wp--preset--color--contrast);
border-radius: var(--wp--custom--radius--md);
background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
cursor: pointer;
}
.eb-menyknapp[hidden] {
display: none;
}
.eb-menyknapp[aria-expanded="true"] {
background: var(--wp--preset--color--primary);
border-color: var(--wp--preset--color--primary);
}
/* hela den mörka navraden är dold tills menyn öppnas */
.eb-mobilmeny .wp-block-group.alignfull:has(.eb-kategorinav) {
display: none;
}
.eb-mobilmeny.eb-meny-oppen .wp-block-group.alignfull:has(.eb-kategorinav) {
display: block;
padding: 0;
}
.wp-block-group.alignfull:has(.eb-kategorinav) > .wp-block-group {
max-width: none !important;
}
.eb-kategorinav,
.eb-kategorinav .wp-block-navigation__container {
display: block !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
/* avdelningsrad: länk | +/−, panelen under hela raden */
.eb-kategorinav .wp-block-navigation__container > .wp-block-navigation-item {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
width: 100%;
border-bottom: 1px solid rgba(232, 227, 213, 0.15);
}
.eb-kategorinav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
display: block;
padding: 14px 24px;
font-family: "Josefin Sans", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--base-alt);
text-decoration: none;
}
.eb-kategorinav .wp-block-navigation__container > .eb-nav-kampanj > .wp-block-navigation-item__content.wp-block-navigation-item__content {
color: var(--wp--preset--color--secondary-light);
}
/* core:s egen pil — ersatt av +/−-knappen */
.eb-kategorinav .wp-block-navigation__submenu-icon {
display: none !important;
}
.eb-kategorinav .eb-nav-toggle {
position: relative;
width: 54px;
padding: 0;
border: 0;
border-left: 1px solid rgba(232, 227, 213, 0.15);
background: transparent;
color: var(--wp--preset--color--base-alt);
cursor: pointer;
}
.eb-kategorinav .eb-nav-toggle::before,
.eb-kategorinav .eb-nav-toggle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 2px;
background: currentColor;
transform: translate(-50%, -50%);
}
.eb-kategorinav .eb-nav-toggle::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.eb-kategorinav .eb-nav-toggle[aria-expanded="true"]::after {
display: none;
}
/* panelen: stängd som standard, öppen under .eb-avd-oppen. Core:s
hover-/focus-regler (visibility/opacity/storlek) nollas på mobil. */
.eb-kategorinav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
grid-column: 1 / -1;
position: static !important;
display: none !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
overflow: visible !important;
margin: 0;
padding: 6px 0 !important;
border: 0 !important;
background: var(--wp--preset--color--base) !important;
color: var(--wp--preset--color--contrast) !important;
}
.eb-mobilmeny .eb-kategorinav .has-child.eb-avd-oppen > .wp-block-navigation__submenu-container,
html:not(.eb-mobilmeny) .eb-kategorinav .has-child > .wp-block-navigation__submenu-container {
display: block !important;
}
/* nivå 3 (t.ex. Jakt › Jaktutrustning › …) visas direkt, indragen */
.eb-kategorinav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
position: static !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
padding: 0 0 0 16px !important;
border: 0 !important;
background: transparent !important;
}
.eb-kategorinav .wp-block-navigation__submenu-container .wp-block-navigation-item {
display: block;
background: transparent !important;
}
.eb-kategorinav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
display: block;
padding: 12px 24px !important;
font-family: Karla, sans-serif;
font-weight: 400;
font-size: 15px;
letter-spacing: 0;
text-transform: none;
color: var(--wp--preset--color--contrast);
text-decoration: none;
}
.eb-kategorinav .eb-nav-visahela > .wp-block-navigation-item__content.wp-block-navigation-item__content {
font-weight: 500;
}
/* vänsterkolumnens avdelningslänk hör till desktop-panelen */
.eb-kategorinav .eb-nav-panelhead {
display: none !important;
}
}