5 CSS Effects For Divi Fullscreen Menu
By default the Divi Fullscreen menu fades in and fades out when opening and closing it and the menu items appear with a small transition delay applied to each of the items so that they show up one after another. This is the standart behaviour and currently there are no any other effects available for the Fullscreen header.
In this post I am going to share with you a few easy to implement but really cool effects for Divi Fullscreen menu which you can apply if you would like to change its default behaviour.
All these effects are implemented using pure CSS.
Fullscreen Menu Effects Preview
Effects CSS Snippets
To implement these effects just choose the desired one and copy its CSS snippet below (they all are commented accordingly) and paste it into the Divi -> Theme Customizer -> Additional CSS section or alternatively go to Divi -> Theme Options and paste the snippet into Custom CSS field.
Or if you are using a child theme(you should be using one), add the CSS into your child theme style.css file.
Remember to use only one effect CSS snippet at a time.
/* Fullscreen Menu Effects */
/* EFFECT #1: CORNER */
.et_header_style_fullscreen .et_slide_in_menu_container {
visibility: hidden;
opacity: 0;
-webkit-transform: translateY(100px) translateX(100px);
transform: translateY(100px) translateX(100px);
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, transform 0.5s, visibility 0s 0.5s;
}
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
}
.et_pb_fullscreen_menu_opened .et_mobile_menu li {
-webkit-transition: opacity 0.5s ease !important;
transition: opacity 0.5s ease !important;
}
/* End EFFECT #1: CORNER */
/* EFFECT #2: SLIDE DOWN */
.et_header_style_fullscreen .et_slide_in_menu_container{
visibility: hidden;
opacity: 1;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
/* End EFFECT #2: SLIDE DOWN */
/* EFFECT #3: SCALE */
.et_header_style_fullscreen .et_slide_in_menu_container {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
.et_pb_fullscreen_menu_opened .et_mobile_menu li {
-webkit-transition: opacity 0.5s ease !important;
transition: opacity 0.5s ease !important;
}
/* End EFFECT #3: SCALE */
/* EFFECT #4: DOOR */
.et_header_style_fullscreen .et_slide_in_menu_container {
visibility: hidden;
opacity: 0.95;
width: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: width 0.5s 0.3s, visibility 0s 0.8s;
transition: width 0.5s 0.3s, visibility 0s 0.8s;
}
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
visibility: visible;
width: 100%;
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
.et_header_style_fullscreen .et_slide_in_menu_container #mobile_menu_slide,
.et_header_style_fullscreen .et_slide_in_menu_container .et_toggle_fullscreen_menu,
.et_header_style_fullscreen .et_slide_in_menu_container .et_slide_menu_top {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened #mobile_menu_slide,
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened .et_toggle_fullscreen_menu,
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened .et_slide_menu_top {
opacity: 1;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.et_pb_fullscreen_menu_opened .et_mobile_menu li {
-webkit-transition-delay: 0s !important;
transition-delay: 0s !important;
}
/* End EFFECT #4: DOOR */
/* EFFECT #5: SIMPLE GENIE */
.et_header_style_fullscreen .et_slide_in_menu_container{
visibility: hidden;
opacity: 1;
-webkit-transform: translateY(60%) scale(0);
transform: translateY(60%) scale(0);
-webkit-transition: -webkit-transform 0.4s, visibility 0s 0.4s;
transition: transform 0.4s, visibility 0s 0.4s;
}
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
visibility: visible;
-webkit-transform: translateY(0%) scale(1);
transform: translateY(0%) scale(1);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.et_pb_fullscreen_menu_opened .et_mobile_menu li {
-webkit-transition-delay: 0s !important;
transition-delay: 0s !important;
}
/* End EFFECT #5: SIMPLE GENIE */
/* END */If you liked these effects you might want to check out this one too: Content Push Effect For Divi Fullscreen Menu.
Share this post with your friends and feel free to leave your thoughts and suggestions in the comments section below and subscribe to stay updated ;)
Inspired by tympanus.net article
Hi there, great so far. is there a possability if i have submenus to show them on klick and make the submenus fonts smaller. And close on klick?
kind regards sabine
Is there a way to add images to each side of the door method, or at least one site?
I’m sorry I meant is there a way to add an image on one side of the door effect #4?
Hi Amit,
I’m sorry I skipped your previous comment. The effect #4 simply transitions the
widthof the menu container from 0 to 100% making it look like it is opening like a door, so, if you add a background image to the menu container and align it to one side, the image will be expanded/shrinked when opening/closing the menu and it won’t look like a opening/closing door.What if I use one of the other effects like the 1st or 2nd one. Do you think it may work well with those transitions?
Yes, it should work.
This is great thank you :)
Would be possible to make a slide down for normal mobile menu?
Hi DIMITRIS.
Thanks for your comment. Yes, it is possible to do that, it may require some JS too though. A similar animation for mobile menu is implemented in my Mobile Menu Customizer plugin for Divi, the Fade In Top animation to be exact, it makes the mobile menu fade in while sliding down. You can see how it looks like if you check out the MMC plugin animations preview video here.