Make Divi Mobile Menu Push the Page Content Down

by | Jul 7, 2018 | 7 comments

In this tutorial we are going to make the Divi mobile menu push the page content down when the menu is opened.

The effect will be implemented for the Default header format and we will use CSS only.

Demo

Implementation

The header bar on mobile devices has absolute positioning and Divi adds some padding-top to page container by default to prevent the page content from being overlapped by the header. We need to remove this padding since we are going to change the positioning of header bar to relative and there will be no need for it anymore.

/* remove page container padding-top */
.et_header_style_left #page-container {
  padding-top: 0 !important;
}

Next let’s set the header bar positioning to relative.

/* change main header position from absolute to relative */
.et_header_style_left #main-header {
  position: relative;
}

Then let’s remove the padding-left from the top navigation (which is being added so that the navigation does not overlap the logo) and set its width to 100%.

/* remove the top navigation left padding and set its width */
.et_header_style_left #et-top-navigation {
  padding-left: 0 !important;
  width: 100%;
}

Now, to prevent the logo from being overlapped by the top navigation we need to bring it above by setting a large z-index and decrease the width of the logo container to prevent it from overlapping the menu hamburger and search icon which would make them non clickable.

Besides that we also need to set a fixed height for the logo container which needs to be equal to the height of the header bar when the menu is closed. This will prevent the logo container from expanding when the menu is opened and thus keep the logo aligned properly.

/* align logo container properly */
.et_header_style_left .logo_container {
  width: 50%;
  height: 78px; /* adjust to your needs */
  z-index: 999;
}

Next, let’s align the search icon properly and apply a z-index to it as well.

/* align search icon to the right */
.et_header_style_left #et_top_search {
  z-index: 9999;
  float: right;
  right: 20px;
}

We also need to set a fixed height for the search form container to prevent it from expanding to full height of the opened menu. Again, just like with the logo container, this height needs to be equal to the height of the header bar when the menu is closed.

/* set a fixed height for search form container */
.et_header_style_left .et_search_form_container {
  height: 78px !important;
}

Then let’s make the dropdown menu container fullwidth.

/* set the mobile nav menu width */
.et_header_style_left #et_mobile_nav_menu {
  width: 100%;
}

And let’s align the menu hamburger icon to the right.

/* align menu hamburger to the right */
.et_header_style_left .mobile_menu_bar {
  text-align: right;
}

The cart icon alignment needs to be adjusted as well.

/* fix cart icon alignment */
#et-top-navigation .et-cart-info {
  position: absolute;
  left: 50%; /* adjust to your needs */
  z-index: 1;
}

Finally, we need to set the position of dropdown menu to relative to make the header bar expand and push the page content down when the menu is opened.

/* change the dropdown menu position from absolute to relative */
.et_header_style_left .et_mobile_menu {
  position: relative;
}

We can also apply some styling if you like.

/* apply dropdown menu styling (optional) */
.et_header_style_left .et_mobile_menu {
  margin-bottom: 35px;
  border-top: 1px solid #cea0f7;
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
/* set border bottom color for menu item link (optional) */
.et_header_style_left .et_mobile_menu li a {
  border-bottom-color: #cea0f7;
}

Bringing all of the CSS together

Now let’s bring all of the CSS snippets above together and wrap them in a media query with max-width of 980px to make sure this CSS applies on mobile devices only.

/* Make Divi Mobile Menu Push the Page Content Down */
@media all and (max-width: 980px){
  /* remove page container padding-top */
  .et_header_style_left #page-container {
    padding-top: 0 !important;
  }
  /* change main header position from absolute to relative */
  .et_header_style_left #main-header {
    position: relative;
  }
  /* align logo container properly */
  .et_header_style_left .logo_container {
    width: 50%;
    height: 78px;
    z-index: 999;
  }
  /* remove top navigation left padding and set width to 100% */
  .et_header_style_left #et-top-navigation {
    padding-left: 0 !important;
    width: 100%;
  }
  /* align search icon to the right */
  .et_header_style_left #et_top_search {
    z-index: 9999;
    float: right;
    right: 20px;
  }
  /* set a fixed height for search form container */
  .et_header_style_left .et_search_form_container {
    height: 78px !important;
  }
  /* set the mobile nav menu width */
  .et_header_style_left #et_mobile_nav_menu {
    width: 100%;
  }
  /* align menu hamburger to the right */
  .et_header_style_left .mobile_menu_bar {
    text-align: right;
  }
  /* fix cart icon alignment */
  #et-top-navigation .et-cart-info {
    position: absolute;
    left: 50%; /* adjust to your needs */
    z-index: 1;
  }
  /* change the dropdown menu position from absolute to relative */
  .et_header_style_left .et_mobile_menu {
    position: relative;
  }
  /* apply dropdown menu styling (optional) */
  .et_header_style_left .et_mobile_menu {
    margin-bottom: 35px;
    border-top: 1px solid #cea0f7;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  /* set border bottom color for menu item link (optional) */
  .et_header_style_left .et_mobile_menu li a {
    border-bottom-color: #cea0f7;
  }
}

Add this CSS either into the Custom CSS field on Divi -> Theme Options page or into the Divi -> Theme Customizer -> Additional CSS field or add it to you child theme style.css file. Save it and all done!

Adjustments for the Divi Mobile Menu Customizer plugin

If you are using the Divi Mobile Menu Customizer plugin, the CSS provided above will cause a few minor layout issues which can be fixed using the following CSS:

/* Adjustments for MMC plugin */
@media all and (max-width: 980px){
  /* set main header positioning */
  body.chi_dmm_styles.et_header_style_left #main-header {
    position: relative !important;
  }
  /* align the menu hamburger icon properly */
  .chi_dmm_styles.et_header_style_left .mobile_menu_bar {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
}

That’s all, hope you’ll 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 😉

Pin It on Pinterest

Shares
Share This