Skip to content

Instantly share code, notes, and snippets.

@yankiara

yankiara/divi-mobile-menu.css

Created June 17, 2018 15:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yankiara/17a7b7d3d11dde0ecfac11b04a05e24f to your computer and use it in GitHub Desktop.
Save yankiara/17a7b7d3d11dde0ecfac11b04a05e24f to your computer and use it in GitHub Desktop.
Download ZIP
New Divi mobile menu styles
Raw
divi-mobile-menu.css
/* Menu mobile pleine largeur qui s'étend sous l'entête */
@media only screen and (max-width: 980px) {
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}
#main-header .container.clearfix.et_menu_container {
width: 100%;
}
.logo_container {
padding-left: 30px;
}
#et-top-navigation {
padding-right: 30px;
}
#mobile_menu {
display: block !important;
right: 0;
left: 0;
top: 80px;
min-height: calc( 100vh - 80px );
transition: all .2s ease-in-out;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
}
.mobile_nav.closed #mobile_menu {
-webkit-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
opacity: 0;
}
.mobile_nav.opened #mobile_menu {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
opacity: 1;
}
}
/* Menu mobile slide-in droite pleine hauteur */
@media only screen and (max-width: 980px) {
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}
#main-header .container.clearfix.et_menu_container {
width: 100%;
}
.logo_container {
padding-left: 30px;
}
#et-top-navigation {
padding-right: 30px;
}
.mobile_menu_bar, #logo {
z-index: 10000;
}
#mobile_menu {
display: block !important;
right: 0;
left: auto;
top: 0;
padding-top: 80px;
min-height: 100vh;
width: 400px;
border-top: none;
transition: all .2s ease-in-out;
-webkit-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
}
.mobile_nav.closed #mobile_menu {
-webkit-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
opacity: 0;
}
.mobile_nav.opened #mobile_menu {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
opacity: 1;
}
#mobile_menu {
background-color: #fff !important;
}
#mobile_menu li a {
color: #333;
}
}
@media only screen and (max-width: 480px) {
#mobile_menu {
width: 100%;
}
}
/* Menu mobile "slide-in" plein écran qui vient d'en bas */
@media only screen and (max-width: 980px) {
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}
#main-header .container.clearfix.et_menu_container {
width: 100%;
}
.logo_container {
padding-left: 30px;
}
#et-top-navigation {
padding-right: 30px;
}
.mobile_menu_bar, #logo {
z-index: 10000;
}
#mobile_menu {
display: block !important;
right: 0;
left: 0;
top: 0;
padding-top: 80px;
min-height: 100vh;
border-top: none;
transition: all .2s ease-in-out;
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
transform-origin: bottom;
}
.mobile_nav.closed #mobile_menu {
-webkit-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
opacity: 0;
}
.mobile_nav.opened #mobile_menu {
-webkit-transform: rotateX(0);
-ms-transform: rotateX(0);
transform: rotateX(0);
opacity: 1;
}
}
@media only screen and (max-width: 480px) {
#mobile_menu {
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment