U ovom tekstu ćete vidjeti kako možete kreirati navigacijski meni u stilu aplikacije, odnosno istog izgleda i oblika kao što ga koriste razne mobilne aplikacije ili npr. poput Instagrama koji koristi. Napravit ćemo takav meni na responzivnoj verziji stranice za mobilne uređaje uz pomoć Elementora.

Navigacijski meni

Prva stvar koju treba učiniti je dodati običan odjeljak. Zatim dodajte naslov i ikonu iznad naslova i centrirajte ih. Da bi izgledala dobro na mobilnom, uz prethodno eksperimentisanje potrebno je podesiti veličinu ikone na 25, a naslov na 11, konkretno u ovom slučaju, te ovisno o temi promijeniti boju kako bi odgovarala ostatak stranice. Nakon toga podesite razmak između ikone i teksta tako da ne bude prevelik, odnosno u dijelu ispod opcije Widgets prostor (px) potrebno je postaviti 0 u kodu opcije Širina kolone (%) postavite 20, ako ćete imati 5 stavki menija.

Nakon toga možete kopirati odjeljak 5 puta ili onoliko puta koliko vam je potrebno, a zatim samo promijeniti ikone i tekst ispod ikone u zavisnosti od vašeg menija. Možete odabrati ikone iz biblioteke ili dodati svoje, slobodno se igrajte s njima, a meni bi u ovom trenutku trebao izgledati ovako.

I tu ste napravili meni za navigaciju sličan aplikacijama, sada ga samo trebate spustiti na dno stranice i popraviti na tom mjestu da se ne pomjera. Ako želite da popravite meni na vrhu stranice i da ga vidite sve vreme dok se krećete po stranici, potrebno je da uradite sledeće. Prilikom postavljanja sekcije, uključite prekidač Efekti pomicanja i kod opcije Sticky ostavite ga uključeno samo za mobilni, ako je to vaš cilj.

Da biste popravili navigacijski meni na dnu stranice, ne možete to učiniti ovako, već na sljedeći način. Morate dodati 2 reda koda ispod Custom CSS sekcije koji ćete vidjeti na slici ispod, a prije nego što to učinite morate povećati Z-indeks na 10, tako da vaš meni ne nestane. Također, potrebno je proširiti dio tako da je meni cijelom širinom stranice, a to se postiže uključivanjem prekidača na opciju Layout pozvao Stretch Section. Kao što ćete vidjeti na slici ispod, meni se pomjerio na dno stranice.

Nadam se da vam je ovaj tekst bio od koristi i da ste naučili nešto novo, ako ste zainteresovani da pročitate još saveta za samostalan rad, možete ih pogledati na našem blog, a u slučaju da se želite posavjetovati sa profesionalcima, kliknite na ovu Veza.

Izvor: youtube