Úvod » Různé » DIVI hamburger menu i při zobrazení na počítači

DIVI hamburger menu i při zobrazení na počítači

Jak udělat menu se třemi čárkami, které se zobrazuje nejen na mobilním telefonu, ale i na počítači?

Do sekce kde mát menu si vložíte CSS třídu s názvem: moje-burger-menu

Do nastavení stránky záložka Pokročilé a dále vlastní CSS si vložíte kód níže.

b

Kód

/******MENU CSS*********/

/* Zarovnani menu doprava */
.moje-burger-menu .et_pb_menu__wrap {
justify-content: flex-end !important;
}
/* Zakazani menu na pocitaci */
.moje-burger-menu .et_pb_menu__wrap .et_pb_menu__menu {
display: none !important;
}
/* Vynuceni mobilni verze menu */
.moje-burger-menu .et_pb_menu__wrap .et_mobile_nav_menu {
display: block !important;
align-items: center !important;
}
/* Plne zobrazeni menu po otevreni*/
.moje-burger-menu .opened #mobile_menu1 {
width: 100vw !important; /* Pres celou sirku */
position: fixed !important;
top: 0em !important;
left: 0vw !important;
height: 100vh !important; /* Pres celou vysku */
display: flex !important;
justify-content: center !important;
flex-direction: column !important;
transition: visibility 0.3s, opacity 0.3s ease-in-out; /* Animace fade in */
padding: 0 !important;
background-color: #171717!important; /* Fullscreen menu barva pozadi */
}
/* Zobrazeni nabidky pres celou obrazovku */
.moje-burger-menu .opened #mobile_menu1 {
opacity: 1 !important; /* Viditelnost opacity 1 */
visibility: visible !important; /* Zobrazuje menu */
}
/* Skryti menu po zavreni */
.moje-burger-menu .closed #mobile_menu1 {
opacity: 0 !important; /* Zde je opacity 0 */
visibility: hidden !important; /* Skryje menu */
transition: visibility 0.3s, opacity 0.3s, left 1s, ease-in-out !important; /* Animace fade out */
}
/* Odebrani odrazek */
.moje-burger-menu #mobile_menu1 li {
list-style: none !important;
text-align: center !important;
width: 100%
}
/* Zindex menu */
.moje-burger-menu .et_pb_menu__wrap span.mobile_menu_bar {
z-index: 999999 !important;
}
/* Zobrazeni zaviraci ikonky u menu po otevreni */
.moje-burger-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
color: white !important; /* Barva ikonky */
content: „\4d“ !important; /* Ikonka na zavreni menu */
left: -40px; /* Pozice ikonky pro zavreni menu*/
}
/* Zafixovani ikonky mobilniho menu v mobilnim zobrazeni */
.moje-burger-menu .opened .mobile_menu_bar {
position: fixed !important;
}
/* Odstraneni border u mobilni nabidky */
.moje-burger-menu .et_mobile_menu {
border-top: none;
}
/* Polozky menu transparentni pozadi */
.moje-burger-menu .et_mobile_menu .menu-item-has-children>a {
background-color: transparent;
}
/* Odstrani pozadi po najeti/hover u menu a prida hover efekt */
.et_mobile_menu li a:hover {
background-color: transparent;
opacity: 1;
transition: transform 0.3s ease-in-out !important; /* Efekt pri umisteni mysi nad */
transform: scale(1.15); /* Hover efekt po prejeti mysi zvetseni polozky v menu o 15% */
}
/* Odstraneni spodniho okraje nabidky */
.moje-burger-menu .et_mobile_menu li a {
border-bottom: none;
}

Moje motto: „Tvorba webových stránek ubírá mi spánek“. Baví mě tvorba webových stránek s redakčním systémem WordPress a vše kolem webů takže grafika, SEO optimalizace a protože jsem bývalá účetní, tak samozřejmě i troška číslíček v marketingu a PPC kampaně. To co umím předávám i dále a to pomocí školení WordPress a také jsem se odhodlala a začala už konečně psát „blog“, za který mě strýček Google nebude mít rád, protože nejsem žádný pisálek a ty mé příspěvky jsou hodně stručné bez omáčky okolo, tak alespoň doufám, že jsou výstižné. Na druhou stranu ten můj blogíček funguje hlavně pro mě jako takový vzpomínáček.

Radka Jiránková

webdesigner, udelam-web.cz