Korzystam ze zmodyfikowanego szablonu „Twenty Thirteen” dla WordPressa i jeśli chodzi o responsywność to szablon pozostawia trochę do życzenia. W tym wpisie pokażę jak zrobić responsywne menu, gdyż domyślnie po zmniejszeniu szerokości pomiędzy najmniejszą a największą szerokością tworzyła się druga niechciana linia w naszym menu. Oprócz tego jeszcze kwestia opisu nagłówka, który również tworzył „drugą linię” co psuło wizualnie efekt.
Responsywne Menu
Przed wykonaniem poniższych operacji menu i opis pod tytułem wyglądał jak poniżej:
Menu dla desktopów
i po zmniejszeniu szerokości o połowę poniżej 1021px:
Brak responsywności menu
Cała operacja ograniczała się do sprawdzenia jakie klasy odpowiadają za właściwości parametrów odpowiedzialnych za wygląd danych elementów i nadpisanie ich nowymi włąściwościami w kontekście dyrektywy media. Całe szczęście każda szanującą się przeglądarka ma odpowiednie narzędzia do inspekcji wskazywanych elementów html. Tak więc nie powinno być problemów ze znalezieniem odpowiednich klas.
W moim przypadku chodziło o header ( nagłówek ) – nic nie musimy zmieniać w pliku header.php ! Zostajemy przy zmianach ( nadpisaniu ) klas w pliku style.css, jak poniżej:
@media all and (max-width:1020px) {
.nav-menu
{
text-align:center;
}
.nav-menu li a
{
font-size:14px;
padding: 2px 2px;
font-weight: bold;
}
.site-description
{
font-size:13px;
}
}
Poniższy kod należy dołączyć do pliku style.css na samym końcu ! I odpowiednio do naszych potrzeb zmodyfikować go ! Opisy klas są jednoznacze tak więc nie będę opisywał czego dotyczą.
Po wykonaniu powyższych operacji, wszystko jest tak jak sobie założyłem:
keys: responsywność, responsywne strony, przykład responsywnego menu, strony, www, html5, style, media, szerokość, mobilne strony