Kako da dodam “sticky header” i da ne ubijem mobilni prikaz?

Dodavanje sticky header-a u WordPress-u uz očuvanje responsive prikaza

Sticky header omogućava da se header sajta prikaže fiksno pri scroll-u, poboljšavajući korisničko iskustvo. Da biste ga dodali bez ugrožavanja responsive dizajna (mobilnog prikaza), koristite CSS sa position: sticky ili premium alate dostupne u WP Host biblioteci od preko 350 premium tema i pluginova.

Koraci za implementaciju (klasični WP pristup preko CSS-a)

  1. Pronađite CSS selektor za header: U temi, obično je .site-header ili header. Koristite pregledač inspektor (F12) da identifikujete tačan selektor.
  2. Dodajte CSS kod: Idite u WordPress administraciju > Izgled > Prilagođavanje > Dodatni CSS i ubacite sledeći kod: 
    header.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff; /* Prilagodite boju */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Opcioni senka */
}
  3. Osigurajte responsive prikaz: Dodajte media query za mobilne uređaje: 
    @media (max-width: 768px) {
    header.site-header {
        position: relative; /* Ili sticky sa podešenim top vrednostima */
        box-shadow: none; /* Uklonite senku na mobilnom ako je potrebno */
    }
}
  4. Testirajte: Proverite na desktopu i mobilnom uređaju (koristite pregledač dev tools za simulaciju).

Preporučeni premium alati iz WP Host biblioteke

  • Astra Pro ili Ocean WP: Ugrađena opcija za sticky header sa responsive podešavanjima.
  • Elementor Pro ili Bricks Builder: Vizuelno podešavanje sticky header-a sa mobilnim podešavanjima (aktivirajte preko tiketa podršci).

Aktivacija premium tema/pluginova: Pošaljite zahtev podršci iz korisničkog panela (do 4 po sajtu).

WP Host WordPress komandni centar olakšava upravljanje temama. Za brži sajt, koristite naše LiteSpeed servere sa NVMe SSD – hosting je ključna karika u performansama. Ako trebate pomoć, kontaktirajte Kontakt.

← Nazad na: Wordpress