5 CSS Effects For Divi Fullscreen Menu

by | Jan 4, 2018 | 7 comments

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 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 */

Save everything and you’re done.

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

Pin It on Pinterest

Shares
Share This