Jak naprawić menu nawigacyjne WordPress pojawiające się pod paskiem administratora

Może być frustrujące, gdy menu nawigacyjne WordPress nagle przesuwa się za pasek administratora. Widzieliśmy, że dzieje się tak u wielu użytkowników, zwłaszcza po zainstalowaniu nowego motywu lub aktywacji niektórych wtyczek.

Ten problem jest częstszy, niż mogłoby się wydawać. Wiele motywów WordPress nie uwzględnia przestrzeni zajmowanej przez pasek narzędzi administratora wyświetlany zalogowanym użytkownikom, co może wypchnąć menu z miejsca.

W tym przewodniku pokażemy kilka sposobów na naprawienie problemu z menu nawigacyjnym WordPress pojawiającym się pod paskiem administratora. Niezależnie od tego, czy potrzebujesz szybkiego, nietechnicznego rozwiązania, czy czystego rozwiązania CSS, znajdziesz metodę, która będzie działać dla Twojej strony.

Dlaczego pasek administratora WordPress nakłada się na menu nawigacyjne?

Jeśli Twoje menu nawigacyjne WordPress wydaje się być ukryte lub nakładać się na pasek administracyjny, możesz mieć do czynienia z typowym problemem wyświetlania.

Widzieliśmy, że ten problem pojawia się, gdy CSS motywu nie uwzględnia prawidłowo wysokości paska administratora. CSS następnie zasłania części nagłówka Twojej witryny, w tym menu nawigacyjne.

Możesz zauważyć, że niektóre elementy menu są trudne do kliknięcia lub że całe menu jest częściowo zasłonięte podczas przeglądania Twojej witryny. Może to być frustrujące, zwłaszcza gdy wpływa na użyteczność Twojej witryny.

Istnieje kilka powszechnych powodów, dla których może się to zdarzyć:

• Konflikty motywów: Czasami CSS w Twoim motywie nie uwzględnia paska administratora, powodując nieprawidłowe pozycjonowanie menu.
• Konflikty wtyczek: Wtyczka modyfikująca wygląd front-endu może nieumyślnie spowodować nakładanie się menu na pasek administracyjny. Może to obejmować wtyczki, które dodają mega menu lub bannery nagłówka.
• Niestandardowy CSS: Jeśli dodałeś niestandardowy CSS do swojej witryny, może on zakłócać prawidłowe wyświetlanie menu.

Ten problem może wpłynąć na użyteczność Twojej witryny, utrudniając użytkownikom nawigację. Na szczęście istnieje kilka sposobów rozwiązania tego problemu, zaczynając od prostego rozwiązania, które nie wymaga żadnego kodowania.

Oto przegląd rozwiązań, które pokażemy. Możesz przejść do tego, z którym czujesz się najbardziej komfortowo:

• Rozwiązanie 1: Ukryj pasek administratora za pomocą ustawień profilu użytkownika
• Rozwiązanie 2: Napraw nakładanie się za pomocą niestandardowego CSS
• Rozwiązanie 3: Sprawdź konflikty wtyczek
• Dodatkowe zasoby dla administratora WordPress

Rozwiązanie 1: Ukryj pasek administratora za pomocą ustawień profilu użytkownika

To najłatwiejszy sposób na rozwiązanie problemu, jeśli nie czujesz się komfortowo z dodawaniem kodu. Działa dobrze dla początkujących lub użytkowników, którzy nie mają uprawnień do zmiany motywu lub dodawania niestandardowego CSS.

Zamiast naprawiać układ, ta metoda całkowicie ukrywa pasek administratora, dzięki czemu nie zasłania już menu.

Uwaga: Ukrycie paska administracyjnego oznacza, że podczas przeglądania witryny nie będziesz już widzieć szybkich linków do edycji postów, zarządzania komentarzami ani aktualizacji wtyczek.

Ponadto to ustawienie dotyczy tylko Twojego konta użytkownika. Jeśli korzystają z niego inne osoby, będą musiały wykonać te same kroki poniżej.

Aby to zrobić, zaloguj się do panelu administracyjnego WordPress i przejdź do Użytkownicy » Profil w menu po lewej stronie.

Przewiń w dół do sekcji Pasek narzędzi i odznacz pole wyboru „Pokaż pasek narzędzi podczas przeglądania witryny”.

Kliknij przycisk „Zaktualizuj profil” na dole, aby zapisać zmiany.

Dlaczego to działa

Wyłączając pasek administratora, usuwasz element, który wypycha menu z miejsca. Jest to proste obejście, które pozwala uniknąć głębszych problemów z układem, zwłaszcza na stronach, gdzie problem widzą tylko zalogowani użytkownicy.

Rozwiązanie 2: Napraw nakładanie się za pomocą niestandardowego CSS

Jeśli czujesz się komfortowo z niestandardowym kodem i chcesz trwałego rozwiązania, dodanie CSS jest właściwą drogą. Pozwala to dokładnie kontrolować zachowanie nagłówka bez wyłączania paska administracyjnego.

Zalecamy użycie wtyczki WPCode do bezpiecznego dodawania niestandardowego CSS. Działa z każdym motywem i pozwala zastosować poprawkę tylko dla zalogowanych użytkowników (ponieważ goście nie widzą paska administratora).

Krok 1: Sprawdź element nagłówka

Kliknij prawym przyciskiem myszy nagłówek lub menu nawigacyjne swojej witryny i wybierz „Zbadaj” w swojej przeglądarce. Spowoduje to otwarcie narzędzi deweloperskich.

Najedź kursorem myszy na HTML.

Przeglądarka podświetli pasujący element na stronie.

Poszukaj klasy lub identyfikatora, który otacza Twoją nawigację. Użyjesz go w swoim niestandardowym CSS.

Krok 2: Zainstaluj WPCode

Zainstaluj i aktywuj wtyczkę WPCode. Jest przyjazna dla początkujących i pozwala dodawać kod bez edycji plików motywu.

Do tego samouczka możesz użyć darmowej wersji, ale wersja Pro oferuje dodatkowe funkcje dla większych projektów.

Krok 3: Dodaj fragment CSS

Przejdź do Fragmenty kodu » Dodaj fragment i wybierz „Dodaj własny kod (nowy fragment)”.

Najpierw nazwij swój fragment w sposób opisowy. W ten sposób łatwo zapamiętasz, do czego służy później. Nazwiemy go „Napraw nakładający się pasek administratora”.

Następnie wybierz „Fragment CSS” jako typ kodu.

Następnie wklej ten kod CSS do edytora:

.logged-in .main-navigation {
    margin-top: 32px;
    z-index: 9999;
    position: relative;
}

Dotyczy to tylko menu nawigacyjnego dla zalogowanych użytkowników, rozwiązując problem bez zmiany wyglądu strony dla odwiedzających.

Jeśli Twój motyw używa innej klasy lub identyfikatora, zastąp .main-navigation tym z narzędzia Inspektora.

Krok 4: Użyj inteligentnej logiki warunkowej

Przewiń do sekcji „Inteligentna logika warunkowa” w WPCode i włącz ją.

Ustaw warunek na „Pokaż”, jeśli „Zalogowany” to „Prawda”.

Następnie kliknij „Zapisz fragment” i przełącz go z pozycji Nieaktywny na Aktywny.

Teraz odwiedź swoją witrynę i sprawdź, czy menu pojawia się nad paskiem administratora.

Jeśli nie, dostosuj margin-top lub zmień selektor.

Dlaczego to działa

Niektóre motywy nie uwzględniają 32-pikselowej wysokości paska administratora. Ten kod CSS dodaje odstępy i wysuwa nagłówek do przodu, naprawiając układ tylko dla użytkowników widzących pasek administratora.

Rozwiązanie 3: Sprawdź konflikty wtyczek

Jeśli menu nadal pojawia się pod paskiem administratora po wypróbowaniu wcześniejszych poprawek, przyczyną może być konflikt wtyczek.

Niektóre wtyczki dodają własny kod CSS lub JavaScript, który może przypadkowo zakłócić układ Twojego motywu, zwłaszcza jeśli modyfikują obszar nagłówka lub nawigacji.

Widzieliśmy, jak to się dzieje na stronach klientów, a śledzenie konfliktowej wtyczki często rozwiązuje problem bez dotykania kodu.

Krok 1: Dezaktywuj wszystkie wtyczki

Przejdź do swojego panelu i wybierz Wtyczki » Zainstalowane wtyczki.

Zaznacz wszystkie wtyczki za pomocą pola wyboru na górze, wybierz „Dezaktywuj” z menu akcji masowych i kliknij „Zastosuj”.

Teraz odwiedź swoją stronę internetową. Jeśli menu nawigacyjne wygląda normalnie, prawdopodobnie winowajcą był jeden z wtyczek.

Krok 2: Aktywuj wtyczki jedna po drugiej

Wróć do ekranu „Zainstalowane wtyczki” i reaktywuj każdą wtyczkę indywidualnie. Po każdej z nich przeładuj swoją witrynę i sprawdź menu.

Powtarzaj tę czynność, aż problem powróci. Ostatnia aktywowana wtyczka jest przyczyną konfliktu.

Krok 3: Zdecyduj, co zrobić

Gdy już zidentyfikujesz problematyczną wtyczkę, masz kilka opcji. Po pierwsze, spróbuj skontaktować się z deweloperem wtyczki w celu uzyskania wsparcia. Może on już wiedzieć o problemie lub zasugerować obejście.

Jeśli nie ma dostępnej poprawki, możesz poszukać alternatywnej wtyczki, która oferuje podobne funkcje bez powodowania problemów z układem.

Dodatkowe zasoby dla administratora WordPress

Oto kilka dodatkowych zasobów, które mogą okazać się pomocne:

• Jak wyłączyć pasek administratora WordPress dla wszystkich użytkowników oprócz administratorów
• Jak naprawić problem z brakującym paskiem administratora w WordPress (Sposoby)
• Jak naprawić brak edytora plików motywu w panelu administracyjnym WordPress (łatwa naprawa)
• Jak dodać niestandardowe linki skrótów do paska narzędzi administratora WordPress
• Przewodnik dla początkujących: Rozwiązywanie błędów WordPress (krok po kroku)

Mamy nadzieję, że udostępnione przez nas rozwiązania rozwiążą problem paska administratora powodującego problemy z wyświetlaniem menu nawigacyjnego lub nagłówka na Twojej stronie internetowej.

Możesz również zapoznać się z naszym podręcznikiem na temat naprawiania najczęstszych błędów WordPress lub zapoznać się z naszymi wskazówkami dotyczącymi dostosowywania obszaru administracyjnego WordPress do Twoich potrzeb.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.