Split menu w GeneratePress – jak zrobić menu z logo na środku (bez CSS hacków)

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-logo

Po 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.