Freebie!! Divi Slide in Menu Header Layouts for 4.0!

Divi 4.0 is awesome and it is great to be able to build headers, footers and templates for posts, categories, woocommerce and custom post types, but one of the common complaints I have seen is that there are very few features for the headers.  This is definitely a valid concern and it is the reason I am bringing my audience these free layouts! What we are giving are 4 free layouts that can be used on your site’s commercial or personal however you would like.  The layouts you will be getting will be divi slide in menu headers like could be done with the old Divi headers.  There is a left and a right slide in menu.  Both of these have two versions.  The first version is a header using one of the free headers that was given out by Elegant Themes after Divi 4.0 was released and the other is a barebones slide in menu that allows you to put the hamburger icon wherever you want in your custom created header. The premade header options also are fixed on desktop which many people were also asking for.  I used the code given by Tim Strifler at Divi Life. All of these options will allow you to build your slide in menu using the Divi Builder so it makes it easy to build a really cool menu without being restricted like the old slide in menu was. These are also mobile friendly and will move your hamburger icon centered on the screen and will make the slide in menu full screen.

To get this great freebie all you have to do is sign up to my list to get great updates about Divi and web design updates and more of these freebies and tutorials.  The video above gives an overview of how to use these layouts and within the zip file for these layouts there is also a very short list of instructions how to get started with these.  I haven’t tried every module with these so there may be some conflicts.  If you find something that does not work correctly please let me know.

Note:depending on the height of your header you may have to add the code below. It can be added in the code module within the layout.  The layout with the header will require this to be done but the 131 number may need to be changed if you use a different sized logo or something of the sort.  That number you will have to play with.

#page-container{
    padding-top:131px;    
}

Changelog
Version
1.0 11/01/19 Original Release
1.1 11/23/19

• Make close button a blurb icon, Fix overflow on right slide in menu.
• Fix menu to allow to close when a link is pressed from the menu module, works better for one page sites
• Fixed second dropdown menus looking wonky.

1.2 02/13/2020

• Correct files in the Zip to make sure they import as specified in the instructions and the video

 

 

Hope you enjoy these layouts!