Content Push Effect For Divi Fullscreen Menu

by Ivan Chiurcci | Jan 12, 2018 | 0 comments

In this post I am going to show how to implement a content push effect for Divi Fullscreen menu which looks awesome both on desktop and mobile screens.

This effect changes the default fade effect of Fullscreen menu making it slide in from the left-hand side of the screen while pushing the page content to the right.

Unlike the other effects for Fullscreen menu that I’ve shared in my previous post, this effect will require not only CSS but a bit of JS too.

Check out the preview below and let’s get it done in a few easy steps.

Content Push Fullscreen Menu Effect Preview

Step 1 – Add CSS Class Using jQuery

When a user clicks the menu “hamburger” to open the Fullscreen menu, the et_pb_fullscreen_menu_opened class is being added to the fullscreen menu container to make it possible to target the opened menu and apply the specific CSS rules to it.

We need to add a specific CSS class to page content too to be able to target and move it to the right using CSS when the Fullscreen menu is opened.

To do this we are going to use the same approach by which the CSS class is being added to Fullscreen menu when clicking the “hamburger”.

So, here is the jQuery, you’ll have to add it into Divi -> Theme Options -> Integrations tab -> Add code to the <head> field, it adds the fullscreen_menu_opened class to the menu bar(#main-header) and the page main area(#et-main-area).

<script type="text/javascript">
(function($) {
    $(function() {
        $( '#page-container' ).on( 'click', '.et_toggle_fullscreen_menu', function() {
                toggle_fullscreen_menu_opened_class();
            });

        function toggle_fullscreen_menu_opened_class() {

            var $main_header = $( '#main-header' ),
                $et_main_area = $( '#et-main-area' );

            $main_header.toggleClass( 'fullscreen_menu_opened' );
            $et_main_area.toggleClass( 'fullscreen_menu_opened' );
        }
    })
})(jQuery);
</script>

Step 2 – Add Content Push Effect CSS

Below you can see the Content Push effect CSS snippet, I’ve commented each rule to help you understand what is going on there, you’ll need to add this CSS into the Divi -> Theme Customizer -> Additional CSS section or Divi -> Theme Options -> Custom CSS field.

Alternatively, you can add it into your child theme style.css file.

/* Content Push Effect For Divi Fullscreen Menu */
/* hide hirozontal scrollbar */
html, body {
  overflow-x: hidden;
}
/* set the page content transition and make sure the horisontal scrollbar is hidden */
#main-header,
#et-main-area {
  overflow-x: hidden;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
          transition: transform 0.5s ease-in-out;	
}
/* move page content to right when fullscreen menu opened */
#main-header.fullscreen_menu_opened,
#et-main-area.fullscreen_menu_opened {
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}
/* create a fullscreen overlay for page content */
#main-header::after,
#et-main-area::after {
  content: '';
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    z-index: 9999;
  background: rgba(0,0,0,0.4);
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
          transition: opacity 0.5s, visibility 0s 0.5s;
}
/* make page content overlay visible when fullscreen menu opened */
#main-header.fullscreen_menu_opened::after,
#et-main-area.fullscreen_menu_opened::after {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
          transition: opacity 0.5s;
}
/* set fullscreen menu container transition and opacity */
.et_slide_in_menu_container {
    opacity: 1 !important;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.5s, visibility 0.5s ease-in-out !important;
          transition: transform 0.5s, visibility 0.5s ease-in-out !important;
}
/* move fullscreen menu into viewport when menu opened */
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
    -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition: -webkit-transform 0.5s;
          transition: transform 0.5s;
}
/* override default transition of menu items */
.et_pb_fullscreen_menu_opened .et_mobile_menu li {
    -webkit-transition: opacity 0.5s ease !important;
            transition: opacity 0.5s ease !important;
}

@media (max-width: 980px) {
/* override default transition of main header on mobile */
    .et_fixed_nav #main-header, 
    .et_non_fixed_nav.et_transparent_nav #main-header {
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
            transition: transform 0.5s ease-in-out;	
    }
}
/* End Content Push Effect For Divi Fullscreen Menu */

Save everything and enjoy the effect.

Hope you find this tutorial useful. Share it with your friends and feel free to leave your thoughts and suggestions in the comments section below and subscribe to stay updated ;)