Envato Elements - pobierasz co chcesz, ile chcesz

Troszkę zmieniałem dziś strukturę menu na stronie, i podczas rutynowych testów wyszło, że przy pewnej szerokości ekranu menu główne po zmianach nie mieści się w jednej linii, tylko łamie się na 2 wiersze. Niby drobiazg, ale ja wolę, jak menu trzyma się razem. Wymagało to malutkiej modyfikacji wyglądu strony (w pewnych warunkach) za pomocą kodu CSS, i pomyślałem, że od razu też opublikuje artykuł na ten temat… Zwłaszcza że niedawno było m.in. jak zmodyfikować zawartość menu zależnie do wielkości ekranu (schować lub pokazać tekst/etykietę), czy jak zmienić wygląd linków, zależnie od adresu, na który wskazują.

Modyfikacja wyglądu menu zależnie od (rozmiaru) urządzenia

W przypadku wykorzystywanego przeze mnie motywu (Extra, magazynowa siostra motywu Divi) menu główne wyświetla się w formie poziomej do pewnego momentu, tzw. „break point” (punktu łamania). Przy oknie/ekranie o rozdzielczości mniejszej niż ten punkt menu w standardowej formie (na komputery stacjonarne) znika, i pojawia się menu mobile, tzw. „hamburger menu”.

We wspomnianych motywach (Extra i Divi) punkt ten wynosi 980px, czyli ekran (okno przeglądarki) o rozdzielczości większej niż 980px wyświetla standardowe menu, a gdy jego rozdzielczość jest mniejsza lub równa 980px, to wyświetli się menu na urządzenia mobilne.

Natomiast menu główne, przy ustawionych parametrach wyglądu (rozmiar znaków, odstępy) jest trochę szersze niż 980px, dlatego, zanim pokazywało się menu mobilne (980px), następowało łamanie na dwa wiersze, którego postanowiłem się pozbyć.

Postanowiłem, że dodam kod, który będzie delikatnie zmniejszał rozmiar znaków w menu, dla szerokości okna przeglądarki pomiędzy 1200px a 981px (980px to już aktywacja menu mobilnego):

@media only screen and ( min-width: 981px ) and ( max-width: 1200px ) {
	#main-header-wrapper #main-header #et-navigation #et-menu a {
		font-size: 14px !important;
	}
}

Oczywiście w powyższym kodzie należy podać identyfikator (ID) i/lub klasę obiektu, dla którego chcemy wprowadzić modyfikację wyglądu. To już zależy bezpośrednio do konstrukcji Waszej strony, najlepiej zajrzeć do źródła lub skorzystać z narzędzie dla deweloperów w przeglądarce.

Dla przykładu podam, że struktura, z której ja skorzystałem, czyli menu głównego w przypadku motywy Extra (i Divi) wygląda tak:

<div id="main-header-wrapper>
	<div id="main-header">
		<div id="et-navigation">
			<div id="et-menu">
				<a>Link w menu</a>
			</div>
		</div>
	</div>
</div>

Choć w tym artykule opierałem się na motywie Divi i WordPressie, to ta metoda powinna zadziałać nie tylko w przypadku innych motywów, ale również i systemów, czy wręcz na stronie pisanej „w czystym  HTMLu”.

(!) Zgłoś błąd na stronie
Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!
Spodobał Ci się artykuł? Zapisz się do naszego Newslettera - ZERO SPAMu, same konkrety, oraz dostęp do dodatkowych materiałów przeznaczonych dla subskrybentów!
Na podany adres e-mail otrzymasz od nas wiadomość e-mail, w której znajdziesz link do potwierdzenia subskrypcji naszego Newslettera. Dzięki temu mamy pewność, że nikt nie dodał Twojego adresu przez przypadek. Jeśli wiadomość nie przyjdzie w ciągu najbliższej godziny (zazwyczaj jest to maksymalnie kilka minut) sprawdź folder SPAM.

Patryk

CEO Webinsider.pl, a do tego CTO, CIO, CFO, CMO, CSO, COO i CRO ;-)
Pasjonat nowych technologii - od sprzętu po oprogramowanie, od serwerów po smartfony i rozwiązania IoT. Potencjalnie kiepski bloger, bo nie robi zdjęć "talerza" zanim zacznie jeść.

Dumny przyjaciel swoich psów :-)
Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!
Napisz komentarz
wipl_napisz-komentarz_01Jeśli informacje zawarte na tej stronie okazały się pomocne, możesz nam podziękować zostawiając poniżej swój komentarz.

W tej formie możesz również zadać dodatkowe pytania dotyczące wpisu, na które – w miarę możliwości – spróbujemy Ci odpowiedzieć.
Linki partnerskie
Niektóre z linków na tej stronie to tzw. „linki partnerskie”, co oznacza, że jeśli klikniesz na link i dokonasz wymaganej akcji (np. zakup/rejestracja) możemy otrzymać za to prowizję. Pamiętaj, że polecamy tylko te produkty i usługi, z których sami korzystamy, i uważamy, że są tego na prawdę warte… :-)
Znaki towarowe i nazwy marek
W niektórych wpisach (oraz innych miejscach na stronie) mogą być przedstawione/użyte znaki towarowe i/lub nazwy marek, które stanowią własność intelektualną tych podmiotów, a zostały użyte wyłącznie w celach informacyjnych.