Knap tekst

Transparent header

Her finder du noget CSS til at lave din header transparent.

Du finder herunder to forskellige CSS’er, den ene er “Opdelt CSS”, her har du mulighed for at skifte styling til hvert element i din header. “Kompakt CSS” er mindre CSS kode, men her deler mange elementer samme styling – herunder farve.

For at koden herunder vil virke skal der gøres følgende:

  1. Den container som skal være sticky skal have “Sticky – Top” (Anbefaling: Giv din sticky container minus margin i bunden så indholdet under bliver trukket op. giv det minus indtil det passer med at indholdet rammer kanten af toppen – så den ikke overlapper.)
    Sæt “Effekter udgangspunkt” til “1” eller mere. (dette ændre hvornår sticky styling bliver aktiv  – i dette tilfælde efter 1px scroll)
  2. Den container som er sticky skal du give ID: “mainHeader” – indsæt UDEN “#”.
  3. Logo(er): Indsæt classer: “header-logo-hvid” og “header-logo-sort“
  4. WordPress Menu = Indsæt class: “header-menu“
  5. Ikon(er) = Indsæt class: “header-ikon“
  6. Knap(er) = Indsæt class: “header-knap“

 

Farverne du ser skal selvfølgelig skiftes til dem du bruger.
Denne: var(–e-global-color-text), tager udgangspunkt i dine globale farvers “Tekst”.

 

Opdelt CSS - du kan skifte hvert element.

/* Header baggrundsfarve */
#mainHeader.elementor-sticky--effects {
    background-color: white !important; 
}

/* Ikon widget */
#mainHeader.elementor-sticky--effects .header-ikon i {
    color: var(--e-global-color-text);
}

/* Menulinje farve */
#mainHeader.elementor-sticky--effects .header-menu .menu-item .elementor-item {
    color: var(--e-global-color-text);
}

/* Menulinje underline - hover */
#mainHeader.elementor-sticky--effects .header-menu .menu-item .elementor-item:hover {
    color: red !important;
}

/* Menulinje underline - aktiv */
#mainHeader.elementor-sticky--effects .header-menu .menu-item a.elementor-item-active:after {
    background-color: orange !important;
}

#mainHeader.elementor-sticky--effects .header-menu .menu-item a.elementor-item-active {
	color: orange !important;
}

/* Menulinje underline */
#mainHeader.elementor-sticky--effects .header-menu .menu-item .elementor-item:after {
    background-color: red !important;
}

/* Menulinje - burgerikon */
#mainHeader.elementor-sticky--effects .header-menu .elementor-menu-toggle {
    color: var(--e-global-color-text);
}

/* Menulinje
    Anbefaling.
    Fjerner padding omkring ikonet.
*/
.header-menu .elementor-menu-toggle {
    padding: 0px;
}

/* Elementor Knapper */
#mainHeader.elementor-sticky--effects .header-knap .elementor-button {
    background-color: var(--e-global-color-accent);
    color: white;
    
    /* Hvis din knap har en kant */
    border-color: blue;
}

/* Logo */
#mainHeader .header-logo-sort {
   display: none;
}

#mainHeader.elementor-sticky--effects .header-logo-sort {
  display: block;
}

#mainHeader.elementor-sticky--effects .header-logo-hvid {
  display: none;
}

Kompakt CSS - du kan ikke skifte hvert element.

/* Header baggrundsfarve */
#mainHeader.elementor-sticky--effects {
    background-color: white !important;
}

/* Ikon widget, menulinje farve og burgerikon */
#mainHeader.elementor-sticky--effects .header-ikon i,
#mainHeader.elementor-sticky--effects .header-menu .menu-item .elementor-item,
#mainHeader.elementor-sticky--effects .header-menu .elementor-menu-toggle {
    color: var(--e-global-color-text);
}

/* Menulinje underline - aktiv og standard */
#mainHeader.elementor-sticky--effects .header-menu .menu-item .elementor-item:after {
    background-color: red !important;
}

#mainHeader.elementor-sticky--effects .header-menu .menu-item a.elementor-item-active:after {
    background-color: orange !important;
}

/* Elementor Knapper */
#mainHeader.elementor-sticky--effects .header-button .elementor-button {
    background-color: var(--e-global-color-accent);
    color: white;
    border-color: blue;
}

/* Fjerner padding omkring burgerikonet */
.header-menu .elementor-menu-toggle {
    padding: 0px;
}

/* Logo  */
#mainHeader .header-logo-sort {
   display: none;
}

#mainHeader.elementor-sticky--effects .header-logo-sort {
  display: block;
}

#mainHeader.elementor-sticky--effects .header-logo-hvid {
  display: none;
}