Wszystko o etykieta nawigacji | Webinsider - Internet widziany od środka ™

Tag: etykieta nawigacji

Dodawanie ikon do strony internetowej (np. do menu) na przykładzie Font Awesome 5 (i Dashicons) i WordPressa

Będzie o ikonach (nie tylko) w menu, czyli temacie trochę pochodnym ostatnich zmian na Webinsider.pl – ikony w menu były chyba od zawsze, ale niedawno dorobiły się ich wszystkie pozycje (w menu głównym), i od razu w statystykach widzę, że jest dużo większe zainteresowanie poszczególnymi pozycjami. Dostałem też kilka pytań, jak takie ikony wdrożyć, stąd ten artykuł…

Modyfikacja wyglądu menu zależnie od (rozmiaru) urządzenia za pomocą CSSa, na przykładzie WordPressa

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 zawartości menu zależnie od (rozmiaru) urządzenia za pomocą CSSa, na przykładzie WordPressa

Koleżanka właśnie kończy jedną ze stron na WordPressie (landing page), którą od strony technicznej dla niej przygotowywałem. Ja odpowiadam za sprawy techniczne i co bardziej skomplikowane elementy na stronie, a ona zajmie się warstwą graficzną. Działa to całkiem sprawnie – ja lubię elementy techniczne, a koleżanka z chęcią “bawi się” wyglądem (zwłaszcza z motywem Divi, który bardzo, ale to bardzo jej w tym kontekście pasuje). Zainspirowana ikonami w menu, które zazwyczaj dodaje na stronach (np. w menu głównym na Webinsider.pl), postanowiła takie same ikony dodać u siebie…

Loading

Pin It on Pinterest