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”.