Jak ustawić stały nagłówek na Tumblrze

Stały nagłówek zwiększa rozpoznawalność marki lub logo na blogu Tumblr, ale po przewinięciu stron traci widoczność. Dzięki kilku zmianom w kodzie HTML motywu możesz utrzymać go na miejscu.

Krok 1 – Wejdź do ustawień Tumblr

Zaloguj się na konto, przejdź do Ustawień w panelu głównym.

Krok 2 – Otwórz edytor motywu

Wybierz swój blog z listy po lewej, kliknij Personalizuj, a następnie Edytuj HTML. Pojawi się wbudowany edytor kodu.

Krok 3 – Znajdź sekcję nagłówka

Przewiń kod i odszukaj fragment definiujący nagłówek. W zależności od motywu może to być tag h1 (np. Rubber Cement, Plaid) lub selektor #wrapper #title (motywy umożliwiające graficzny nagłówek, np. Redux).

Krok 4 – Dodaj style utrzymujące nagłówek

Wewnątrz sekcji nagłówka wstaw następujące reguły CSS:

position: fixed;
z-index: 100;

Ustawienie position: fixed sprawia, że nagłówek pozostaje w stałej pozycji, a z-index: 100 zapewnia, że znajduje się na najwyższej warstwie, zapobiegając nakładaniu się innych elementów.

Krok 5 – Sprawdź efekt

Kliknij Aktualizuj podgląd i przewiń stronę myszką lub paskiem przewijania. Nagłówek powinien pozostać na miejscu.

Krok 6 – Zapisz zmiany

Jeśli wszystko działa prawidłowo, kliknij Zapisz, aby utrwalić modyfikacje.

Wskazówki

Na niektórych motywach stały nagłówek może zasłaniać treść postów lub pasek boczny. Dodaj dodatkowy odstęp, np.:

margin-top: 300px;

gdzie 300px to wysokość Twojego nagłówka. Wstaw tę regułę do sekcji postów i paska bocznego, aby zachować przejrzystość układu.