Share This

Kiedy przeglądamy strony responsywne na ekranie smartfona lub tabletu o mniejszym ekranie zamiast standardowego menu widzimy tylko charakterystyczną ikonkę - trzy poziome paski w lewym lub prawym rogu ekranu. Zdążyliśmy się już do tego przyzwyczaić i nie zastanawiamy się gdzie podziało się zwykłe menu.

Tak też jest w Gantry 5 na którym projektuję responsywne strony internetowe Lublin na joomla i wordpress. Czasem zdarza się że trafiamy na strony www na którym projektant zapewne ze względów estetycznych ukrył menu także na większych ekranach - pc i laptopów. Wtedy także widzimy ikonkę z trzema paskami. Jest to ikona FontAwesome - fa-navicon - jeśli projektant używa tych ikon. W Gantry 5 są one wbudowane we framework.



Ostatnio przydarzył mi się projekt strony www Lublin w którym także menu miało wyświetlać sie na każdym ekranie pod postacią ikony fa-navicon. W gantry 5 menu osadzamy w pozycji "Navigation" lub "Top" - tak zaleca zespół RT.
Menu mobilne widzimy w zakładce layout szablonu w pozycji "Offcanvas Section" - standardowo nie jest ona widoczna na naszej stronie www ale można ją wywołać na kilka sposobów.
Oprócz menu można tam osadzać także moduły - ale o tym innym razem


W kilku komercyjnych szablonach RocketTheme pojawiał się efekt podobny do tego jaki chciałem osiągnąć. Po przyjrzeniu się im okazało się że nie jest to jednak coś zupełnie innego.
Szukając rozwiązania jakiegoś problemu nigdy nie wychodzę z założenia że jestem pierwszy. Warto więc przeszukać forum - w tym wypadku forum RT. Okazało się że problem jest dość banalny.


1. Tak wygląda ikona menu mobilnego - lewy górny róg (tło wielkość, kolor i inne parametry do zmiany w CSS)

strony internetowe Lublin na joomla i Gantry 5

 



2. Tak wygląda menu po kliknięciu na ikonkę fa-navicon - oczywiście możemy je ostylować w CSS

strony www Lublin na joomla i Gantry 5





3. Co zrobić żeby pojawiło się ono także na większym ekranie. W Gnatry 5 jeśli przeglądamy stronę na małym ekranie standardowe menu jest automatycznie ukrywane, a pojawia się ikona fa-navicon.
Chcąc pokazać ikonę fa-navicon - menu mobilnego nie usuwamy normalnego menu z zakładki layout naszego szablonu!!!

Przechodzimy do zakładki Styles - wybieramy szablon który przypisaliśmy do strony www Lublin na joomla i wordpress, lub tylko do wybranych zakładek.
Na dole zakładki mamy panel "Configuration Styles", a w nim zakladkę "Breakpoints"
Tu ustalamy szerokość szablonu naszej strony internetowej. Na dole jest pole "Mobile Menu" - normalnie jest tu wartość 48rem - taka jak przy szerokości szablonu przypisanej do Tabletu.

strony www Lublin na joomla i Gantry 5

Po kilku próbach wstawiłem w to pole 120rem - wtedy dopiero w moim szablonie menu standardowe zostało ukryte a pojawiła się ikona menu mobilnego na ekranie monitora Full Hd.
Jeśli mamy przypisane do strony internetowej kilka szablonów musimy tę operację powtórzyć dla każdego z nich.  Jeśli nie widzicie ikony - możliwe że zlała się ona z tłem.
 

Przydało się? - Udostępnij

Blog - popularne

Specified key was too long; max key length is 767 bytes - błąd podczas przywracania strony za...

Klient poprosił mnie o zwiększenie wersji PHP do najnowszej wersj PHP 7.2. Przy stronach firmowych najczęściej nie wykonuję takich operacji z automatu tylko staram się na początek sprawdzić czy jest...
Czytaj dalej

Akeeba Kickstart - czyli jak przywrócić stronę internetową Joomla 3 z kopii zapasowej Akeeba Backup

Przenosimy stronę na CMS joomla na inny serwer. Mając wykonaną za pomocą Akeeba Backup kopię strony www możemy ją przenieść w krótkim czasie na dowolny serwer. Czas wysyłania na serwer rozpakowanych...
Czytaj dalej

Jak zrobić banner slideshow w joomla 3 - dodatek Roksprocket dla strony www na joomla

Roksprocket dla Joomla czyli jak zrobić banner dla naszej strony internetowej na joomla. Roksprocket do moduł którego wersja występuje także dla wordpressa. Można za jego pomocą wykonać nie tylko...
Czytaj dalej

Jak dodać firmę do Google Maps

Tworząc firmową stronę internetową prawie zawsze umieszczamy na niej mapę z lokalizacją firmy. Czasy statycznych map graficznych minęły dawno temu. Teraz najczęściej szukamy firm na google które ma...
Czytaj dalej

Jak dodać film z youtube stronę www na joomla - dodatek AllVideos od Joomla Works

Niezbyt często korzystam w wykonywanych stronach www z możliwości osadzania w nich wideo. Jeśli klienci mają przygotowane materiały wideo warto je wykorzystać nie tylko z powodu lepszego zapoznania...
Czytaj dalej

Jak wykonać przekierowanie DNS domeny zarejestrowanej na home.pl na serwer nazwa.pl - na którym...

Przekierowanie DNS wykonujemy kiedy domenę zarejestrowaliśmy w jednej firmie, a hosting dla naszej strony internetowej wykupiliśmy w innej. Dzisiaj pokażę jak przekierować domenę zarejestrowaną na...
Czytaj dalej

Przezroczystość w plikach PNG - jak zapisać plik z PNG z przezroczystością w Adobe Photoshop dla...

Format .png to drugi w kolejności po .jpg format plików graficznych wykorzystywany w czasie tworzenia stron internetowych. Oczywiście większość użytkowników internetu najbardziej kojarzy .jpg bo w...
Czytaj dalej

WordPress - jak wykonać kopię zapasową strony www na WordPress za pomocą Akeeba Backup

WordPress podobno nie sprawia problemów, ale dmuchając na zimne - kopię strony www należy wykonać jeśli zależy nam na bezpieczeństwie naszych danych. Akeeba Backup to narzędzie które powstało jako...
Czytaj dalej

Akeeba Backup - jak wykonać kopię strony www na CMS Joomla 3

Akeeba Backup pozwala na tworzenie kopii na wszystkich wersjach joomla - tu w wersji dla Joomla 3 Mając stronę internetową utrzymywaną na dobrym hostingu nie musimy martwić się o wykonywanie kopii...
Czytaj dalej