A Divi különösen jól kezeli a reszponzivitást, azonban vannak olyan esetek, mikor a mobil menü (hamburger menü) megjelenítésére hamarabb van szükségünk, mint az alapból meghatározott töréspont. Erre azért lehet szükség, mert a kisebb képernyőknél esetleg a menüpontok rálógnak a logóra, vagy két sorba kerülnek, ami nem túl esztétikus.
Egyénileg is meg tudjuk határozni, hogy a Divi mikor váltson át a megszokott menürendszerről mobil menüre. Alapbeállításként ez 980px-nél történik meg, tehát ha a megjelenítő szélessége kisebb mint 980px, a Divi a mobil menüt jeleníti meg.
Divi mobil menü megjelenítése nagyobb képernyőn
Annak érdekében, hogy meghatározhasd azt a pontot, ahol a Divi már a mobil menüt jeleníti meg, másold az alábbi kódrészletet a Divi » Egyéni CSS részébe.
Módosítsd a 980px-t arra, amire szeretnéd, de ügyelj, hogy nagyobb értéket adj meg!
/*Divi custom breakpoint*/
@media only screen and ( max-width: 980px ) {
#top-menu-nav, #top-menu {display: none!important;}
#et_top_search {display: none!important}
#et_mobile_nav_menu {display: block;}
}
Ha sok menüpontod van, akkor a fenti kód használata esetén a menü alsó részei (amik már kilógnak a mobilnézetben) nem jelennek meg. Az alábbi kódrészlettel (amit szintén az Egyéni CSS-be kell másolni) meghatározhatod, hogy ne legyen fix a navigáció, görgethető legyen a menü is, így elérhetővé válnak az alsó menüpontok.
/*Fix navigáció megszüntetése*/
.et_fixed_nav #main-header, .et_fixed_nav #top-header{
position: absolute;
}
Nem kell olyan sok menüpont!
A weboldal tervezésénél vegyük figyelembe, hogy a felhasználói élményen nem segít, ha rengeteg menüpontunk van. Pszichológiai tény, hogy minél nagyobb a választható lehetőségek száma, annál nehezebben döntünk, így a főmenüben csak olyan menüpontok legyenek, amik valóban nélkülözhetetlentek!
Ha kíváncsi vagy a döntéshozás pszichológiájára, javaslom, hogy nézd meg Barry Schwartz TED előadását ide kattintva!