Prosty poradnik o tym, jak zrobić w szablonie Divi od ElegantThemes proste, przejrzyste, eleganckie menu zmiany wersji językowej.
Ze względu na to, że w wersji na Desktop na komputery i laptopy odnośnikami są flagi w głównym menu WordPressa, prezentowane menu jest idealne dla dwóch wersji językowych, przy większej liczbie flag moim zdaniem wizualnie menu się tak dobrze nie prezentuje.
Wygląd menu w wersji Desktop – na komputery PC i laptopy.
Etap 1.
Ustawiamy w Personalizacji (Stylista tematów szablonu Divi) – Główny pasek Menu – wysokość nagłówka – na 70px, a logo na 55px; taką samą wysokość wpisujemy w Ustawieniach nawigacji nieruchomej.
Następnie dodajemy do głównego menu odnośniki do wersji językowych (np. polskiej i angielskiej lub angielskiej i niemieckiej. Przed tym etapem warto przygotować sobie obrazy z odpowiednimi flagami i wgrać do biblioteki mediów. Dodajemy nową pozycję w menu w sekcji “Własny odnośnik” – w polu Adres URL wpisujemy adres strony głównej dla wersji językowej, a w polu tekst odnośnika wpisujemy adres naszego obrazka: np.
<img src="https://adresstrony.pl/wp-content/uploads/2020/11/english_flag.png" alt="English Version">
Po dodaniu pozycji do menu w polu Klasy CSS wpisujemy: lang-menu
Następnie postępujemy tak samo z kolejną pozycją menu (np. polską lub niemiecką).
Etap 2.
Tworzymy nowe menu – klikając Utwórz nowe menu – nazwijmy je np. languages lub jezyki. Następnie dodajemy do nowego menu pozycje z flagami – tak jak zrobiliśmy to w głównym menu. W pozycji Klasy CSS wpisujemy (w obu pozycjach menu) – menu-eng W Ustawieniach Menu zaznaczamy nasze menu jako Menu drugorzędne i zapisujemy Menu.
Etap 3 – CSS
Dodajemy kod CSS w polu Divi > Opcje szablonów graficznych > Niestandardowe CSS.
Żeby na ekranach o szerokości mniejszej niż 981px nie wyświetlały się flagi z głównego menu, a pozycje z secondary menu zamiast dodania do menu rozwijanego wyświetlały się na górze strony. Przesuwamy też delikatnie w górę miejsce wyświetlania logo, aby lepiej komponowało się na stronie .
@media (max-width: 980px) {
#top-header, div#et-secondary-menu, ul#et-secondary-nav {
display: block !important;
}
#top-header .container {
padding-top: 0.75em !important;
}
.et_fixed_nav #main-header, .et_fixed_nav #top-header {
margin-top: 26px !important;
}
#et-secondary-nav, #et-secondary-nav li {
margin-top: -25px;
}
.et_mobile_menu .menu-eng {
display: none !important;
}
.et_header_style_left #logo, .et_header_style_split #logo {
margin-top: -15px !important;
}}
Następnie ustawiamy rozmiar obrazka z flagą – tutaj ustawiony na 25px:
#et-secondary-nav img {
width: 25px !important;
z-index: 999999999999999999 !important;
}
Ustawiamy rozmiar obrazków flag w wersji desktop:
.lang-menu img {
width: 25px;
}
Na koniec przesuwamy w górę nagłówek w wersji desktop.
.et_fixed_nav #main-header, .et_fixed_nav #top-header {
margin-top: -30px;
}
Przybliżamy do siebie flagi w wersji Desktop:
.lang-menu {
padding-right: 1px !important;
}
Po tym wszystkim menu zmiany języka na smartfonach prezentuje się następująco:
Otwarte menu w wersji na smartfony – flagi znajdują się ponad zawartością witryny, a w menu rozwijanym nie są widoczne flagi.
