Free Divi Header Extension Provides 20 New Hamburger Menu Styles

WordPress Development for Intermediate Users: Theme Development in Detail
June 8, 2016
How to Setup Email Notifications for WordPress Updates
June 8, 2016
Show all

Welcome to Day 8 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


Today we are happy to release our next Divi extension in the Divi 100 marathon. This extension, the Divi Hamburger Menu Styles Extension, adds twenty new hamburger menu styling options to Divi’s Fullscreen and Slide-in Header Formats.

The header is one of the areas we get the most community requests for customization so we’re excited to offer more unique styling options for those seeking it in their hamburger menus.

As you can see in the live demo below, the Divi Hamburger Menu Styles Extension comes with four new hamburger types, each with five unique animation styles. To test them out simply click each individual icon or the “toggle all” button to see them all animate at once.

See the Pen Custom Hamburger Menu by Elegant Themes (@elegantthemes) on CodePen.

Downloading & Using the Divi Hamburger Menu Styles Extension

As will continue to be the case with all of the extensions we release during the Divi 100 Marathon, the Divi Hamburger Menu Styles Extension comes in the form of a plugin. So to use it you’ll need to install it just as you would any other plugin.

Once you’ve downloaded the zipped file, locate the divi-100-hamburger-menu.zip file in your computer’s download folder. Next, login to your WordPress admin and navigate to Plugins > Add New. Click the “Upload Plugin” button at the top and upload the zipped file you’ve just downloaded. When prompted, click “Activate Plugin” to activate the extension.

You should now notice a new menu in your WordPress Admin’s sidebar called Divi 100. This is where all of the settings for Divi 100 extensions will appear. If you’ve already downloaded our first extension, The Article Card Plugin, you will simply have a new option within the Divi 100 sidebar menu called Hamburger Menu.

New-Divi-100-Extensions-Menu-Option-3

Click the “Hamburger Menu” option to open up this extension’s settings panel. Here you will find four settings you can configure. The hamburger menu type, animation style, default color, and active color.

Divi-100Hamburger-Menu-Settings

Once you’ve finished configuring your settings you can click “Save Changes” and view them on the front end.

Download The Divi Hamburger Styles Extension

Divi Extensions are released under the GPL, which means you can use them for free in both personal and commercial projects! By using ElegantThemes.com and our products you agree to our Terms of Service.

Plugin Updates & Bug Reporting

As will be the case with all of our Divi 100 extensions, bug reporting and updates have been made available via their respective github repositories. This is the best place for both us and you to track bugs, make fixes, and download new releases. You’re even able to clone, fork, or otherwise edit the code to your heart’s content.

We hope you have enjoyed this Divi 100 freebie and we look forward to providing new extension and code snippets every week for the remainder of the series. So be sure to subscribe to our email newsletter for notifications when new free resources are made available.

Visit The Repository

divi-2-6-logo

Divi 100 Day 8

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}.divi-repo-link {text-align: center; font-size: 16px; border-radius: 4px; padding: 15px; color: #fff; display: block; margin: 10px 0 10px; background-color: #454545;font-weight: bold;}

The post Free Divi Header Extension Provides 20 New Hamburger Menu Styles appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar