Podczas tworzenia strony dla fotografa ślubnego trafiliśmy na klasyczny problem.
Menu miało wyglądać elegancko, minimalistycznie i „premium”.
Czyli:
- logo na środku
- menu po lewej i prawej stronie
- dużo przestrzeni i lekkości
Taki układ nazywa się split menu (menu dzielone).
I tu pojawia się problem:
GeneratePress nie ma takiej opcji w ustawieniach.
Próby „na około” – czyli jak NIE robić split menu
Na początku próbowaliśmy zrobić to „technicznie”:
- przesuwanie logo w CSS
- sztuczne dzielenie menu
- kombinacje z pozycjonowaniem
Efekt?
- na jednej stronie działało
- na drugiej się rozjeżdżało
- czasem logo nachodziło na menu
Krótko mówiąc: za dużo kombinowania, za mało stabilności.
Najprostsze rozwiązanie (które naprawdę działa)
Zamiast walczyć z układem strony…
dodajemy logo jako element menu.
Brzmi banalnie?
Bo takie właśnie jest 🙂
Dzięki temu:
- menu samo dzieli się na dwie części
- logo automatycznie trafia na środek
- nic się nie psuje na innych stronach
Krok po kroku – jak zrobić split menu w GeneratePress
Krok 1: Wejdź do ustawień menu
W panelu WordPress przejdź do:
Wygląd → Menu
To jest miejsce, gdzie zarządzasz wszystkimi linkami w górnym menu strony.
Krok 2: Dodaj „logo” jako element menu
Po lewej stronie znajdziesz opcję:
Własny odnośnik
Kliknij ją i wpisz:
- URL: / (czyli strona główna – możesz też wkleić swój adres, np. https://twojastrona.pl)
- Tekst linku: LOGO
Kliknij Dodaj do menu.
Krok 3: Przenieś logo na środek
Teraz przeciągnij element „LOGO” w odpowiednie miejsce.
Na przykład:
- Home
- O mnie
- Blog
- LOGO
- Poradnik
- Kontakt
I to jest cały „sekret” split menu 🙂
Krok 4: Dodaj klasę CSS (to ważne)
Kliknij w element „LOGO” i znajdź pole:
Klasy CSS
Wpisz tam:
menu-logoPo co to robimy?
Dzięki temu będziemy mogli zamienić tekst „LOGO” na obrazek.
Jeśli nie widzisz tego pola:
Kliknij u góry strony Opcje ekranu i zaznacz Klasy CSS.
Krok 5: Zapisz menu
Kliknij Zapisz menu.
Na tym etapie:
- menu już jest podzielone
- logo jest w środku (jako tekst)
Jak zamienić napis „LOGO” na prawdziwe logo
Teraz dodamy prosty kod, który podmieni tekst na obrazek.
Wejdź w:
Wygląd → Dostosuj → Dodatkowy CSS
I wklej ten kod:
.menu-logo a {
display: block;
width: 82px;
height: 82px;
background-image: url('TU_WSTAW_SWÓJ_ADRES_LOGO');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
text-indent: -9999px;
}Co trzeba zmienić?
Zamiast:
TU_WSTAW_SWÓJ_ADRES_LOGO
wklej adres swojego logo (np. z biblioteki mediów WordPress).
Co to daje?
- tekst znika
- w jego miejscu pojawia się logo
- menu wygląda profesjonalnie
Opcjonalnie: efekt „premium” (hover i styl)
Jeśli chcesz, możesz dodać delikatny efekt najechania kursorem:
.menu-logo a {
transition: 0.3s ease;
opacity: 0.9;
}
.menu-logo a:hover {
transform: scale(1.05);
opacity: 1;
}Oraz usunąć podkreślenie tylko z logo:
.menu-logo a::after {
display: none !important;
}Dzięki temu logo zachowuje się bardziej „jak logo”, a nie jak zwykły link.
Ważna wskazówka (szczególnie dla fotografów)
Jeśli masz duże zdjęcie na górze strony (hero):
- na początku użyj jasnego menu
- po przewinięciu zmień je na ciemne
To ma ogromny wpływ na odbiór strony.
Podsumowanie
GeneratePress to świetny motyw, ale nie wszystko jest dostępne „z kliknięcia”.
Zamiast:
- walczyć z CSS
- kombinować z układem
- tracić godziny na poprawki
wystarczy zmienić podejście.
Dodanie logo jako elementu menu to:
- najprostsze rozwiązanie
- najbardziej stabilne
- łatwe do edycji w przyszłości
Efekt?
Menu wygląda jak projekt robiony na zamówienie — a robisz je w kilka minut.
Najczęściej zadawane pytania (FAQ)
Czy GeneratePress ma wbudowane split menu?
Nie. GeneratePress nie posiada domyślnej opcji menu z logo na środku i elementami po bokach. Taki układ trzeba stworzyć samodzielnie — najprościej dodając logo jako element menu.
Czy można zrobić split menu tylko za pomocą CSS?
Tak, ale nie jest to najlepsze rozwiązanie. Metody oparte na CSS (np. position: absolute czy nth-child) często powodują problemy z responsywnością i stabilnością na różnych stronach.
Czy to rozwiązanie działa na wszystkich stronach?
Tak. Ponieważ korzysta z natywnego systemu menu WordPress, działa poprawnie na wszystkich podstronach bez konfliktów.
Czy takie menu działa na urządzeniach mobilnych?
Tak. Na telefonach menu automatycznie przechodzi w tryb mobilny (hamburger), a logo jako element menu może być ukryte lub dostosowane za pomocą CSS.
Gdzie wkleić kod CSS?
Kod CSS należy wkleić w: Wygląd → Dostosuj → Dodatkowy CSS. Po zapisaniu zmiany będą widoczne od razu na stronie.
Czy mogę użyć własnego logo?
Tak. Wystarczy podmienić adres w kodzie CSS na URL swojego logo (np. z biblioteki mediów WordPress).
Jak jeszcze możesz ulepszyć menu w GeneratePress
Split menu to dopiero początek. Jeśli chcesz, aby Twoja strona wyglądała naprawdę profesjonalnie, warto pójść krok dalej.
Sticky header (menu przyklejone do góry)
Dzięki temu menu jest zawsze widoczne podczas przewijania strony. To poprawia użyteczność i sprawia, że użytkownik łatwiej się porusza po stronie.
Zmiana stylu menu przy scrollu
Na początku możesz mieć jasne menu na zdjęciu, a po przewinięciu zmienić je na ciemne z tłem. To bardzo popularne rozwiązanie na stronach premium.
Efekt „glass” (rozmyte tło)
Delikatnie rozmyte tło menu (blur) daje nowoczesny, elegancki efekt — szczególnie dobrze wygląda na stronach fotograficznych.
Lepsza typografia menu
Małe zmiany jak:
- większe odstępy między literami
- uppercase (duże litery)
- większe odstępy między elementami
mogą całkowicie zmienić odbiór strony.
Animacje i mikrointerakcje
Delikatne animacje hover lub pojawiania się menu sprawiają, że strona wygląda bardziej profesjonalnie i „żyje”.
Dla kogo takie menu ma największy sens?
Split menu z logo na środku najlepiej sprawdza się w branżach, gdzie liczy się estetyka:
- fotografowie
- projekty kreatywne
- portfolio
- strony premium
Jeśli Twoja strona ma robić wrażenie wizualne — to rozwiązanie jest strzałem w dziesiątkę.
Na koniec
Czasami zamiast szukać skomplikowanych rozwiązań, warto spojrzeć na problem inaczej.
W tym przypadku:
najprostsze rozwiązanie okazało się najlepsze.
I co najważniejsze — działa stabilnie.
