U ovom tekstu ćete videti kako možete da napravite navigacioni meni u stilu aplikacije, odnosno istog izgleda i oblika kao što koriste razne mobilne aplikacije ili npr. kao Instagram što koristi. Napravićemo takav meni na responsive verziji sajta za mobilni uz pomoć Elementora.

Navigacioni meni

Prva stvar koju je potrebno uraditi je dodati običnu sekciju. Zatim, treba dodati naslov i ikonicu iznad naslova i potrebno ih je centrirati. Kako bi izgledalo dobro na mobilnom, uz prethodno eksperimentisanje, potrebno je podesiti veličinu ikonice na 25 a naslova na 11, konkretno u ovom slučaju, i u zavisnosti od teme promeniti boju kako bi se uklapalo sa ostatkom sajta. Nakon toga podesite razmak između ikonice i teksta da ne bude prevelik, odnosno kod sekcije pod opcijom Widgets Space(px) potrebno je postaviti 0 i kod opcije Column Width(%) postaviti 20, ukoliko ćete imati 5 stavki menija.

Nakon toga, možete da kopirate sekciju 5 puta ili koliko vam je već potrebno i onda samo promenite ikonice i tekst ispod ikonice u zavisnosti od vašeg menija. Možete birate ikonice iz biblioteke ili dodati svoje, slobodno se igrajte sa tim, a meni bi ovako trebao da izleda u ovom trenutku.

I eto, napravili ste navigacioni meni nalik na aplikacije, sad je samo potrebno spustiti ga u donji deo sajta i fiksirati ga na tom mestu kako se ne bi pomerao. Ukoliko želite da fiksirate meni na vrhu stranice i da ga sve vreme vidite dok skrolujete stranicu, potrebno je uraditi sledeće. Kod podešavanja sekcije, uključite prekidač Scrolling Effects i kod opcije Sticky ostaviti uključeno samo za mobilni, ako vam je to cilj.

Da bi fiksirali navigacioni meni na dnu sajta, to ne možete da uradite ovako, već na sledeći način. Potrebno je dodati 2 linije koda pod sekcijom Custom CSS koje ćete videti na slici ispod, a pre nego što uradite to, potrebno je da povećate Z-index na recimo 10, kako vam meni ne bi nestao. Takođe, potrebno je proširiti sekciju da meni bude u celoj širini stranice, a to se postiže uključivanjem prekidača kod opcije Layout pod nazivom Stretch Section. Kao što ćete videti na slici ispod, meni je prešao na dno stranice.

Nadam se da vam je ovaj tekst bio od koristi i da ste naučili nešto novo, ako vas interesuje čitanje još saveta za samostalni rad, možete ih pogledati na našem blogu, a u slučaju da želite da se konsultujete sa profesionalcima, kliknite na ovaj link.

Izvor: youtube