Responsywne menu w WP

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:

Standard

Menu dla desktopów

i po zmniejszeniu szerokości o połowę poniżej 1021px:

Menu nie responsywne

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:

Responsywne

keys: responsywność, responsywne strony, przykład responsywnego menu, strony, www, html5, style, media, szerokość, mobilne strony

Dodaj komentarz