Module Blurb: New Style Hover Expand

Module Blurb: New Style Hover Expand

TIPS & TRICKS, TUTORIAL

Module Blurb:
New Style Hover Expand

Follow us on

Fabio Sarcona, Web Developer, Italy

17 Jun 2016

For my last child theme, Foody, I added a new style for the Blurb Module. It is an effect on mouse over that allows you to show the contents and social icons.

This style can be useful when you want to create a Testimonials section or to show your services or members of the team.

I bet you’ll be interested to see how to get this new style and then, I want to start right away by showing the live demo of the final result:

1. Step

The first step is to download the file.JSON and import it into Divi library.

NOTE: If you do not know how to use the functions of Import / Export of Divi, you can read this Complete Guide, I wrote for Aspen Grove Studios.

2. Step

The second step and copy and paste the CSS code in the options panel, or if you use a Child Theme, you can copy the code in the style.css file. You’ll notice that in the CSS code I added some comments, this to make easy customization.

/*-------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------- BLURB CARD HOVER -----------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------*/


/*--------------------- General setting  --------------------------*/
div .blurb_content_hover { 
	-webkit-transition: .25s; 
	-moz-transition: .25s; 
	position: absolute;
	background: #fff; /****** ---> Customize here the background-color ******/
	transition: .25s;
	color: #333;  /****** ---> Customize here the font color for the content ******/
	padding: 30px; 
	height: 100px; 
	width: 100%; 
	bottom: 0; 
	font-size: 18px; 
	text-align: center; 
}
@media only screen and (max-width: 980px) { 
	div .blurb_content_hover { 
		padding: 35px; 
	} 
}
.blurb_hover .et_pb_blurb_content { 
	overflow: hidden; 
} 

/*--------------------- First Title  --------------------------*/
div .blurb_content_hover p:first-child { 
	font-size: 18px; 
	font-weight: 600; 
	color: #00bca4; /****** ---> Customize here the font color for the First Title ******/
	padding-bottom: 5px; 
}
/*--------------------- SubTitle  --------------------------*/
div .blurb_content_hover p:last-child { 
	font-size: 15px; 
	color: #9b9fa8; /****** ---> Customize here the font color for the SubTitle ******/
}

/*--------------------- Hover Expand Content Size  --------------------------*/
.et_pb_blurb:hover .blurb_content_hover {
height: 230px;
}

/*--------------------- Blurb Image  --------------------------*/
.blurb_hover .et_pb_main_blurb_image { 
	border: 13px solid #fff; 
	height: 280px; 
}
/*--------------------- Blurb Shadow  --------------------------*/
.blurb_hover.et_pb_blurb {
    -webkit-transition-duration: .3s;
         transition-duration: .3s;
         -webkit-transition-property: -webkit-transform,box-shadow;
         transition-property: transform,box-shadow;
         -webkit-transition-timing-function: ease-in-out;
         transition-timing-function: ease-in-out;
	-webkit-box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
	-moz-box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
	box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
} 
.blurb_hover.et_pb_blurb:hover { 
	-webkit-box-shadow: 0px 5px 24px 8px rgba(55, 55, 55, 0.1);
	-moz-box-shadow: 0px 5px 24px 8px rgba(55, 55, 55, 0.1); 
	box-shadow: 0px 10px 27px 4px rgba(55, 55, 55, 0.16);
	transform: translateY(-5px);
}

/*--------------------- Blurb Social Link (Font Awesome)  --------------------------*/
.social_blurb_hover { 
	margin: 15px 10px; 
	font-size: 20px; 
	width: 40px;
	height: 40px; 
	padding: 9px; 
	color: #ddd; /****** ---> Customize here the color the Icon Social ******/
	border: 1px solid #c4c4c4; /****** ---> Customize here the border-color Icon Social ******/
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%;
	border-radius: 50%;
} 
.social_blurb_hover:hover { 
	-webkit-transition: .4s;
	-moz-transition: .4s; 
	color: #fff; 
	background-color: #00bca4; /****** ---> Customize here the Background-color Icon Social ******/
	border: 1px solid #00bca4;  /****** ---> Customize here the border-color on hover Icon Social ******/
}

How to customize the HTML code

At this point, it has everything you need to use this new module Blurb for your projects, but I also want to show you what it looks like the HTML code, so you can easily customize every element.

As you can see, for the title and the subtitle I did not use the default fields of the module Blurb, but I added all the content in the editor. So, title, subtitle, the content visible on hover and social icons will be customized here.

NOTE: for this module I used the Font Awesome icons, so if your site has not installed the Font Awesome, the icons will not be visible.

#Update:

To respond to the request of some users to have multiple user options, I added two new layouts. In the first I replaced the social icons with icons of telephone, email, and maps, where you only have to replace the placeholder with your phone number and email address. Instead, the second layout I removed icons and added a button that you can use as a call to action.

This two new layout, you find them in the folder that you can download by clicking the green button positioned at the beginning of this tutorial. there is a new file (“Blurb Hover 2 NEW STYLE“) that you will need to import it into your library. Then you will need to copy and paste the code found inside the toggle below.

NOTE: The CSS code below is specific to the two new layouts.

/*-------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------- BLURB CARD HOVER -----------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------*/


/*--------------------- General setting  --------------------------*/
div .blurb_content_hover { 
	-webkit-transition: .25s; 
	-moz-transition: .25s; 
	position: absolute;
	background: #fff; /****** ---> Customize here the background-color ******/
	transition: .25s;
	color: #333;  /****** ---> Customize here the font color for the content ******/
	padding: 30px; 
	height: 100px; 
	width: 100%; 
	bottom: 0; 
	font-size: 18px; 
	text-align: center; 
}
@media only screen and (max-width: 980px) { 
	div .blurb_content_hover { 
		padding: 35px; 
	} 
}
.blurb_hover .et_pb_blurb_content { 
	overflow: hidden; 
} 

/*--------------------- First Title  --------------------------*/
div .blurb_content_hover p:first-child { 
	font-size: 18px; 
	font-weight: 600; 
	color: #00bca4; /****** ---> Customize here the font color for the First Title ******/
	padding-bottom: 5px; 
}
/*--------------------- SubTitle  --------------------------*/
div .blurb_content_hover p:last-child { 
	font-size: 15px; 
	color: #9b9fa8; /****** ---> Customize here the font color for the SubTitle ******/
}

/*--------------------- Hover Expand Content Size  --------------------------*/
.et_pb_blurb:hover .blurb_content_hover {
height: 100%;
}

/*--------------------- Blurb Image  --------------------------*/
.blurb_hover .et_pb_main_blurb_image { 
	border: 13px solid #fff; 
	height: 280px; 
}
/*--------------------- Blurb Shadow  --------------------------*/
.blurb_hover.et_pb_blurb {
    -webkit-transition-duration: .3s;
         transition-duration: .3s;
         -webkit-transition-property: -webkit-transform,box-shadow;
         transition-property: transform,box-shadow;
         -webkit-transition-timing-function: ease-in-out;
         transition-timing-function: ease-in-out;
	-webkit-box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
	-moz-box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
	box-shadow: 0px 2px 10px 2px rgba(55, 55, 55, 0.05); 
} 
.blurb_hover.et_pb_blurb:hover { 
	-webkit-box-shadow: 0px 5px 24px 8px rgba(55, 55, 55, 0.1);
	-moz-box-shadow: 0px 5px 24px 8px rgba(55, 55, 55, 0.1); 
	box-shadow: 0px 10px 27px 4px rgba(55, 55, 55, 0.16);
	transform: translateY(-5px);
}

/*--------------------- Blurb Social Link (Font Awesome)  --------------------------*/
.social_blurb_hover { 
	margin: 15px 10px; 
	font-size: 20px; 
	width: 40px;
	height: 40px; 
	padding: 9px; 
	color: #ddd; /****** ---> Customize here the color the Icon Social ******/
	border: 1px solid #c4c4c4; /****** ---> Customize here the border-color Icon Social ******/
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%;
	border-radius: 50%;
} 
.social_blurb_hover:hover { 
	-webkit-transition: .4s;
	-moz-transition: .4s; 
	color: #fff; 
	background-color: #00bca4; /****** ---> Customize here the Background-color Icon Social ******/
	border: 1px solid #00bca4;  /****** ---> Customize here the border-color on hover Icon Social ******/
}

/*--------------------- Button Hover Blurb  --------------------------*/

.button_hover_blurb a { 
 color: #fff;  /****** ---> Customize here the Button color text ******/
 font-weight: 700;
} 
.button_hover_blurb { 
 background-color: #1fd4c1; /****** ---> Customize here the Background-color button ******/
 display: inline-block;
 position: relative;
 padding: 0.6em 1.3em;
 margin-top: 6%;
 border-radius: 30px;
 cursor: pointer;
 transition: .3s;
 }
.button_hover_blurb:hover {
 opacity: 0.7;
}

Conclusion

And that’s it. As always, if you liked this article, I invite you to subscribe to the newsletter for not miss the next article and exclusive free resources for members.

Let me know what you think of this tutorial in the comments 😉

Create an animated text in Divi with Eager

Create an animated text in Divi with Eager

TIPS & TRICKS, TUTORIAL

Create an animated text
in Divi with Eager

Follow us on

Fabio Sarcona, Web Developer, Italy

3 Jun 2016

That’s it, at the end of this article you will be able to create an animated text but above all know Eager by Cloudflare and you’ll wonder how you ever did without at least until now!

Yes, Ok Fabio, but what Eager?

Eager is a tool that allows you to improve your website with dozens of free apps that you can install in seconds without touching a single line of code. The available extensions are so many and I can assure you that some will make you jump out of your chair, then I advise you to keep you strong!

To understand the power of Eager, you just think that you can add hover effects, animations, slider, live-chat and more, with the same ease with which you install an application on your phone.

No matter if you are a developer or a newbie, you can add effects and new features to your site with an ease never before seen. You can choose between many applications, you can easily customize thanks to an easy and intuitive interface, and preview the result.

https://gyazo.com/5971c5aca921319356b7ff9dbedad510

After this brief introduction, it’s time to get to the heart of this tutorial, because I want to show you how you can easily create animated text using Eager, this way you will see for yourself what this means is revolutionary!

1. Step

Eager connected to the site and click on the button Get Eager

2. Step

Here you can select the platform where use of Eager applications. For this tutorial we’ll use the Embed Code feature because I do not like to use plugin, I prefer to keep light my WordPress installation, but if you prefer, you can use the free WordPress plugin by clicking the button WordPress

3. Step

Now we need to copy and paste this line of code in your child theme of the header.php file (if you’re not using it, you should create it) before chiusare the tag </ head>

4 Step

Eager, to this point, will have recognized your website and then you are ready to install your first application. For this tutorial, I chose Typist, an application that allows you to create animated text. Click on the preview button will open a new window where you can customize your application.

5 Step

To make it even easier to use Eager I created this video:

Conclusion

As you saw in the video, it was really easy to create an animated text, and if you think that all this is possible with a line of code, you can easily understand the power of this truly amazing tool.

You can play with other applications, add new features to your site without inflating your site with thousands of plugins, and all at no cost!

So, have you started to love even you Eager? 🙂

now it’s your turn..

What do you think of this tool? you think you use it?

How to create a Flip Card for Divi

How to create a Flip Card for Divi

TIPS & TRICKS, TUTORIAL

How to create
a Flip Card for Divi

Follow us on

Fabio Sarcona, Web Developer, Italy

27 May 2016

Do you want to know how to create a Flip Card for Divi? You said yes? Well, because in this article I’ll explain how to create Flip Card with animated CSS3 with a few simple steps. Let’s start now!

The first step is to add a section and one or more columns with a code module.

To make your life easier you can download this file with three sections that I used for this tutorial. Inside you’ll find the HTML code.

NOTE: You will need to Import the JSON file into your Divi Library while adding the JS code and the code for Font-Awesome to your options panel as described below.

So the necessary steps are:

  1. Import the json file into your Divi Library;
  2. Add the JS code in your option panel in the Integrations tab;
  3. In the same tab, under the JS code, paste the code to load Font-Awesome (optional)

Before moving forward with this tutorial, I will show you how it’s done the HTML code found inside module because I want you to learn how to customize it even if you have little or no knowledge of code. This is a screenshot of the HTML code. All you need to do to customize this code and change the icon in the tag and change the title text, paragraphs and add the link to the button.

Now that you’ve seen how to edit the HTML code I show you three examples of flip cards and their CSS code that you will need to add to the Divi or to your child theme options panel.

Now add jquery

First add this script (you can find the JS code in the zip package along with the layouts used for this tutorials) in your options panel, clicking on the Integrations tabAdd code to the < head > of your blog. Here is a screenshot:

1. Flip Card Horizontal

In this first example I applied a horizontal flip effect. This is the most common effect but it is 100% Responsive and allows you to get any result or style with little effort.

/****** FLIP CARD HORIZONTAL *******/
 .flip_panel {
     margin: 0 auto;
     height: 300px;
     position: relative;
     display: block;
     transform-style: preserve-3d;
}
 .flip_panel .front, .flip_panel .back {
     text-align: center;
}
 .flip_panel .front {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 99;
     text-align: center;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel .back {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 1000;
     -webkit-transform: rotateY(-180deg);
     -moz-transform: rotateY(-180deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel.flip .front {
     z-index: 99;
     -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
}
 .flip_panel.flip .back {
     z-index: 100;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
}
/*** Flip Card Front box ****/
 .flip_box_front {
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 25px 15px;
     border: 2px solid #ddd;
}
/*** Flip Card Back box ****/
 .flip_box_back {
     background-color: #fafafa;
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 35px 15px 20px 15px;
     border: 2px solid #ddd;
}
/*** Button Learn More ****/
 .flip_button {
     display: inline-block;
     margin: 8% auto 0;
     padding: .5em 1.2em;
     cursor: pointer;
     font-size: 16px;
     background: #598edb;
}
/*** Button Learn More color Text ****/
 .flip_button a {
     color: #fff ;
}
/*** Title Flip Card ****/
 .flip_title {
     margin: 0 auto;
     text-align: center;
     line-height: 1em;
     font-size: 1.15em ;
     display: block;
     font-weight: bold;
}
 .flip_icon {
     display: inline-block;
     font-size: 3em;
     margin: 0 auto 7% auto;
     border: 3px solid #ddd;
     text-align: center;
     padding: 26px;
     border-radius: 50%;
}
 .text_flip_card {
     padding: 0 7%;
}

2. Flip Card Vertical

This effect is the same as above, with the only difference that the animation is in the vertical direction. Live Demo:

/****** FLIP CARD VERTICAL *******/
 .flip_panel {
     margin: 0 auto;
     height: 300px;
     position: relative;
     display: block;
     transform-style: preserve-3d;
}
 .flip_panel .front, .flip_panel .back {
     text-align: center;
}
 .flip_panel .front {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 99;
     text-align: center;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel .back {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 1000;
     -webkit-transform: rotateX(-180deg);
     -moz-transform: rotateX(-180deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel.flip .front {
     z-index: 99;
     -webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
}
 .flip_panel.flip .back {
     z-index: 100;
     -webkit-transform: rotateX(0deg);
     -moz-transform: rotateX(0deg);
}
/*** Flip Card Front box ****/
 .flip_box_front {
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 25px 15px;
     border: 2px solid #ddd;
}
/*** Flip Card Back box ****/
 .flip_box_back {
     background-color: #fafafa;
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 35px 15px 20px 15px;
     border: 2px solid #ddd;
}
/*** Button Learn More ****/
 .flip_button {
     display: inline-block;
     margin: 8% auto 0;
     padding: .5em 1.2em;
     cursor: pointer;
     font-size: 16px;
     background: #598edb;
}
/*** Button Learn More color Text ****/
 .flip_button a {
     color: #fff ;
}
/*** Title Flip Card ****/
 .flip_title {
     margin: 0 auto;
     text-align: center;
     line-height: 1em;
     font-size: 1.15em ;
     display: block;
     font-weight: bold;
}
 .flip_icon {
     display: inline-block;
     font-size: 3em;
     margin: 0 auto 7% auto;
     border: 3px solid #ddd;
     text-align: center;
     padding: 26px;
     border-radius: 50%;
}
 .text_flip_card {
     padding: 0 7%;
}

3. Flip Card with Background Image

In this case I added a background image in the front panel with a linear-gradient to create an overlay effect and highlight the text.  See the live demo: 

/****** FLIP CARD BACKGROUND IMAGE *******/
 .flip_panel {
     margin: 0 auto;
     height: 300px;
     position: relative;
     display: block;
     transform-style: preserve-3d;
}
 .flip_panel .front, .flip_panel .back {
     text-align: center;
}
 .flip_panel .front {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 99;
     text-align: center;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel .back {
     height: inherit;
     position: absolute;
     top: 0;
     z-index: 1000;
     -webkit-transform: rotateY(-180deg);
     -moz-transform: rotateY(-180deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
}
 .flip_panel.flip .front {
     z-index: 99;
     -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
}
 .flip_panel.flip .back {
     z-index: 100;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
}
 .flip_box_front {
     -moz-background-size: cover;
     -o-background-size: cover;
     -webkit-background-size: cover;
     background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ), url('https://creativechildthemes.com/divi-lab/wp-content/uploads/sites/6/2016/04/marketing.jpg');
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 25px 15px;
     -webkit-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
     -moz-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
     box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
}
 .flip_box_back {
     background-color: #fafafa;
     width: 100%;
     min-height: 300px;
     margin: 0 auto;
     padding: 35px 15px 20px 15px;
     -webkit-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
     -moz-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
     box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.3);
}
 .flip_button {
     display: inline-block;
     margin: 5% auto 0;
     padding: .5em 1.2em;
     cursor: pointer;
     font-size: 16px;
     background: #598edb;
}
 .flip_button a {
     color: #fff ;
}
 .flip_box_front .flip_title {
     color: #fff;
     margin: 15% auto 0 auto;
     text-align: center;
     line-height: 1em;
     font-size: 1.55em ;
     display: block;
     font-weight: bold;
}
 .flip_title {
     margin: 0 auto;
     text-align: center;
     line-height: 1em;
     font-size: 1.15em ;
     display: block;
     font-weight: bold;
}
 .flip_box_front .text_flip_card {
     color: #fff;
}
 .text_flip_card {
     padding: 0 7%;
}

Conclusion

This is all. Now you also know how to create beautiful animated cards in Divi, and all you have to do and vent your creativity :).

If you liked this article then I’m sure you’ll appreciate very well the next article .. you want to know what you speak? I’ll show you how to create an animated text, so if you do not want to miss the next article and the free resources subscribe to the newsletter.

Have a nice weekend! 🙂

8 new style for mobile menu of Divi

8 new style for mobile menu of Divi

TIPS & TRICKS, TUTORIAL

8 new style
for mobile menu of Divi

Follow us on

Fabio Sarcona, Web Developer, Italy

24 May 2016 – Update 17 July 2018

One of the most common desires of each of Divi user is always to have different styles of design for the menu, especially for the navigation of the mobile.

That’s why I thought that the creation of a collection of styles to customize the Menu Mobile of Divi could be useful for all those users who want to get a new look for the menu, but they have little or no knowledge of the code.

This will not only allow you to customize the design of your mobile menu but also to have greater flexibility because styles are only applied to mobile browsing, so you can safely use the default menu for the navigation of the desktop and one of the styles of this list for mobile.

Note: I apologize in advance if my English there are some mistakes, I still have to improve. ?

Before starting..

To make all the layouts you see in this tutorial work well you need to add to your Divi site the JS code you can find inside the file you can download by clicking on the button below. You have to add this JS code in the field “Add code to the of your blog” that you can find in the options panel.

Divi >
Theme Options >
Integrations >
Add code to the of your blog.

Unlike the first version of this post, in this updated version I used a JS code that allows you to have the items clickable menu parent. With the previous code it was not.

Note: If you also want to add icons as in the examples in this tutorial, you’ll need to add Font-Awesome to your Divi site. But it’s just an option, every single Style works well even without Font-Awesome. 

1. Style Slide-In

This style allows for a floating menu with a slide-in, very similar to the slide-in menu of Divi, with the difference that this style is applied only to the mobile navigation.

menu-mobile-style-1 mobile menu divi

Code CSS for this Style
    /**** Nesting Menu ****/

    /* when mobile menu is open, change hamburger icon to x icon */

    #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
        content: '\4d';
    }
    /* makes sub sub menu icon be right arrow instead of down arrow */

    #top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
    #et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
        content: '5';
    }
    /* - mobile menu toggling elements, injected via jQuery - */
    /* make menu list item be relative, to be able to position toggle within this item */

    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
        position: relative;
    }
    /* the new toggle element, which is added via jQuery */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
        position: absolute;
        z-index: 1;
        width: 36px;
        height: 36px;
        line-height: 36px;
        border-radius: 50%;
        top: 5px;
        right: 30px;
        cursor: pointer;
        text-align: center;
    }
    /* the new toggle element when popped */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
        background-color: rgba(255,255,255, 0.2);
    }
    /* toggle icon */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
        font-family: "ETmodules" !important;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 36px;
        font-size: 24px;
        text-transform: none;
        speak: none;
        content: '\33';
        color: #da1755;
    }
    /* toggle icon when triggered */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
        content: '\32';
    }
    /* hide sub menus by default */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
        display: none !important;
        padding-left: 0;
    }
    /* show sub menu when triggered via jQuery toggle, and add slight bg color */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
        display: block !important;
    }
    /* remove sub menu list item left padding, since padding will be on anchors */

    #main-header #mobile_menu.et_mobile_menu li li {
        padding-left: 0;
    }
    /* adjust mobile menu anchors side paddings */

    #main-header #mobile_menu.et_mobile_menu li a {
        padding-left: 20px;
        padding-right: 20px;
    }
    /* indent sub sub menus further */

    #main-header #mobile_menu.et_mobile_menu li li li a {
        padding-left: 60px;
        padding-right: 20px;
    }

    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
        background-color: transparent;
        font-weight: inherit;
    }
    /* make the current page's mobile menu link be different */

    #main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
        font-weight: bolder;
    }

    /****** Code Style: Menu Slide-In ******/

    /* Font Awesome */
    .fa {
        margin-right: 15px ;
      }

    @media only screen and (max-width: 980px){
    #mobile_menu {
        display: block !important;
        min-height: 100vh;
        height: 100%;
        top: 0;
        right: 0;
        position: fixed;
        z-index: 9998;
        overflow: scroll;
        border-top: none;
        padding-top: 60px !important;
    }

    .et_mobile_menu li a {
        color: #da1755 !important;
        width: 100%;
        float: left;
        text-align: left;
        border-bottom: 1px solid #ddd;
        margin: 5px;
        transition: .2s;
        text-transform: uppercase;
    }
    .mobile_nav ul#mobile_menu .current_page_item > a {
        color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1);
    }

    .mobile_nav.closed #mobile_menu {
        background: rgba(51,51,51,0.9) !important;
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: -webkit-transform 0.4s 0s;
        -moz-transition: -moz-transform 0.4s 0s;
        transition: transform 0.4s 0s;
        background: rgba(51,51,51,0.9) !important;
    }

    .mobile_nav.opened #mobile_menu {
        background: rgba(27,29,30,0.98) !important;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
        -webkit-overflow-scrolling: touch;
        -webkit-transition: -webkit-transform 0.4s 0s;
        -moz-transition: -moz-transform 0.4s 0s;
        transition: transform 0.4s 0s;
    }

    #main-header .container.clearfix.et_menu_container {
        width: 100%;
    }

    .mobile_menu_bar:before {
        color: #1b1d1e !important;
    }
    .mobile_nav.opened .mobile_menu_bar:before {
        content: '\4d';
        color: #fff !important;
        z-index: 9999;
    }
    }

    @media only screen and  (max-width: 980px) {
      .et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar {    
        z-index: 9999;
      }
      #et-top-navigation {    
        padding-right: 5px;
      }
    }

    @media only screen and (min-width: 481px)  {
      #mobile_menu {    
        width: 340px;    
        margin-left: calc(100% - 340px);
      }
    }
    @media only screen and (max-width: 480px)  {
      #mobile_menu {    
        width: 290px;    
        margin-left: calc(100% - 290px);
      }
    }

2. Style Slide-In Gradient

This style is similar to the previous one, but as you can see, I applied a gradient background, and I pointed out the current link with a transparent background, and with the left padding. To customize the background color, you just replace the two colors within the brackets and you can decide the direction of the gradient by replacing higher with: right, left or bottom. Of course, you can get more gradient effects, but I preferred a simpler solution to also customize for beginners.

menu-mobile-style-2 mobile menu divi

Code CSS for this Style
/* Nesting Menu */


/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 28px;
    right: 0px;
    cursor: pointer;
    text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 36px;
    font-size: 24px;
    text-transform: none;
    speak: none;
    content: '\33';
    color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
}
/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
}
/* make the current page's mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
}

/****** Code Style: Slide-in Gradient ******/

/* Font Awesome */
.fa {
    margin-right: 15px ;
  }

@media only screen and (max-width: 980px){
#mobile_menu {
    display: block !important;
    min-height: 100vh;
    height: 100%;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 9998;
    overflow: scroll;
    border-top: none;
    padding-top: 60px !important;
}
.et_mobile_menu li:nth-child(1) {
    padding-top: 20px;
}
.et_mobile_menu li a {
    color: #fff !important;
    width: 100%;
    float: left;
    border: none !important;
    text-align: left;
    margin: 5px 10px;
    transition: .2s;
    text-transform: uppercase;
    font-size: 1.4em !important;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
    color: #fff !important;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 30px;
padding-left: 20px;
}

.mobile_nav.closed #mobile_menu {
      background: -moz-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -webkit-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -o-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -ms-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: linear-gradient(to bottom, #62278d 0%, #2cc09b 100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

.mobile_nav.opened #mobile_menu {
      background: -moz-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -webkit-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -o-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: -ms-linear-gradient(top, #62278d 0%, #2cc09b 100%);
      background: linear-gradient(to bottom, #62278d 0%, #2cc09b 100%);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

#main-header .container.clearfix.et_menu_container {
    width: 100%;
}

.mobile_menu_bar:before {
    color: #1b1d1e !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
    z-index:9999;
    color: #fff !important;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
}

@media only screen and  (max-width: 980px) {
  .et_header_style_split .mobile_menu_bar, 
  .et_header_style_left .mobile_menu_bar {    
    z-index: 9999;
  }
  #et-top-navigation {    
    padding-right: 5px;
  }
}

@media only screen and (min-width: 481px)  {
  #mobile_menu {    
    width: 340px;    
    margin-left: calc(100% - 340px);
  }
}
@media only screen and (max-width: 480px)  {
  #mobile_menu {    
    width: 290px;    
    margin-left: calc(100% - 290px);
  }
}

3. Stile Full-Width

The Full-Width style, as the name suggests, allows you to have a mobile menu that covers the entire screen. In this example, you can see the end result that you can customize in minutes.

mobile menu divi

Code CSS for this Style
/* Nesting Menu */


/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    background-color: rgba(255,255,255, 0.2);
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 35px;
    right: 30px;
    cursor: pointer;
    text-align: center;
    -webkit-box-shadow: 0 2px 14px 0 rgba(0,0,0, .1);
            box-shadow: 0 2px 14px 0 rgba(0,0,0, .1);
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 36px;
    font-size: 24px;
    text-transform: none;
    speak: none;
    content: '\33';
    color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
}
/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
}
/* make the current page's mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
}

/****** Code Style: Menu Full-screen ******/

/* Font Awesome */
.fa {
    margin: 10px ;
  }

@media screen and (max-width: 980px) {
  .et_header_style_centered #main-header {
    position: fixed;
  }
  .et_header_style_centered #main-header .mobile_nav {
    background-color: transparent;
  }
  .mobile_nav.closed .select_page {
    display: none;
  }
  .et-fixed-header#main-header {
    background-color: transparent !important;
  }
}
.et_mobile_menu {
  top: 0;
  left: 0;
  position: fixed;
  z-index: 9998;
  overflow: scroll !important;
  background-color: rgba(10, 10, 10, 0.9) !important;
  margin-left: -30px;
  padding: 25% 0;
  height: 100%;
  width: calc( 100% + 60px);
  border-top: none;
}
.et_mobile_menu li a {
  text-align: center;
  font-size: 1.55em;
  border: 0;
  padding: 5% 0;
  text-transform: uppercase;
  letter-spacing: 6px;
}

.mobile_nav ul#mobile_menu .current_page_item > a {
  color: #5376F6;
  background-color: rgba(255,255,255, 0.1);
}
.mobile_nav ul#mobile_menu li ul li a {
  font-size: 1.05em !important;
  margin: auto;
  padding-top: 0.2em;
}
.et_mobile_menu li a:hover {
  color: #999;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.mobile_nav.opened .mobile_menu_bar:before {
  content: '\4d';
  z-index: 9999;
  color: #fff;
}

4. Style Multicolor

The Multicolor style is one of my favorites. Again customization is really very easy, all you have to do and replace colors for each element, the bottom of the code. But relax, I added a comment in the code to help you customize the colors easily.

menu-mobile-style-5 mobile menu divi

Code CSS for this Style
/* Nesting Menu */

/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    background: #fff;
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 36px;
    right: 80px;
    cursor: pointer;
    text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 36px;
    font-size: 24px;
    text-transform: none;
    speak: none;
    content: '\33';
    color: #363636;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
}

/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
}
/* make the current page's mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
}

/****** Code Style: Slide-in Gradient ******/

/* Font Awesome */
.fa {
    margin-right: 15px ;
  }

@media screen and (max-width: 980px) {
.et_header_style_centered #main-header .mobile_nav {
background-color: transparent;
}
.mobile_nav.closed .select_page {
display: none;
}
.et-fixed-header#main-header {
background-color: transparent !important;
}
.et_header_style_centered #main-header {
position: fixed;
}
}
.et_mobile_menu {
top: 0;
left: 0;
position: fixed;
z-index: 9998;
overflow: scroll !important;
background-color: rgba(27, 29, 30, 0.95) !important;
margin-left: -30px;
padding-top:  0px;
height: 100%;
width: calc( 100% + 60px);
border-top: none;
}
.et_mobile_menu li a {
color: #fff;
text-align: center;
font-size: 1.6em;
border: 0;
padding: 45px 0;
text-transform: uppercase;
letter-spacing: 4px;
}

.mobile_nav ul#mobile_menu .current_page_item > a {
color: #f9f9f9;
}
.mobile_nav ul#mobile_menu li ul li a {
font-size: 1em !important;
padding: 1em;
}
.et_mobile_menu li a:hover {
color: #363636;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
z-index: 9999;
color: #606060 !important;
top: -15px !important;
left: 27px !important;
transition: .15s;
}

/**__ The following code allows you to change the background of each individual item. All you need to do is change the hex code with the one that you prefer, and if your menu has more than 7 items, you must copy the piece of code that you see and change the number in the parenthesis in ascending order. Example: if your menu has 10 items, you will need to add more 3 snippets and change the number in the brackets with 8, 9, 10. __**/

.et_mobile_menu li:nth-child(1) {
    background-color: #F0E8DA;
}

.et_mobile_menu li:nth-child(2) {
    background-color: #F2D3DE ;
}

.et_mobile_menu li:nth-child(3) {
    background-color: #E8B5C4;
}

.et_mobile_menu li:nth-child(4) {
    background-color: #C98392;
}

.et_mobile_menu li:nth-child(5) {
    background-color: #83B5B1;
}
.et_mobile_menu li:nth-child(6) {
    background-color: #B2D9CF;
}
.et_mobile_menu li:nth-child(7) {
    background-color: #92bdcf;
}

5. Style Multicolor with Icon left and Text aligns right

As you can see is very similar to the previous style, the only customization I’ve applied, and move the icons on the left and aligned the text to the right.

menu-mobile-style-3 mobile menu divi

Code CSS for this Style
/* Nesting Menu */


/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 70px;
    right: 16px;
    cursor: pointer;
    text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 36px;
    font-size: 24px;
    text-transform: none;
    speak: none;
    content: '\33';
    color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
}

/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
}
/* make the current page's mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
}

/****** Code Style: Style Multicolor ******/

/* Font Awesome */
.fa {
    position: absolute;
    display: block;
}

@media screen and (max-width: 980px) {
.et_header_style_centered #main-header .mobile_nav {
background-color: transparent;
}
.mobile_nav.closed .select_page {
display: none;
}
.et-fixed-header#main-header {
background-color: transparent !important;
}
.et_header_style_centered #main-header {
position: fixed;
}
}
.et_mobile_menu {
top: 0;
left: 0;
position: fixed;
z-index: 9998;
overflow: scroll !important;
background-color: rgba(27, 29, 30, 0.95) !important;
margin-left: -30px;
padding-top:  0px;
height: 100%;
width: calc( 100% + 60px);
border-top: none;
}
.et_mobile_menu li a {
color: #fff;
text-align: right;
font-size: 1.6em;
border: 0;
padding: 45px 30px;
text-transform: uppercase;
letter-spacing: 4px;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
color: #f9f9f9;
}
.mobile_nav ul#mobile_menu li ul li a {
font-size: 1.1em !important;
margin: auto;
padding-top: 0.2em;
}
.et_mobile_menu li a:hover {
color: #f9f9f9;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
z-index: 9999;
font-size: 26px !important;
color: #333 !important;
top: -22px !important;
left: 32px !important;
transition: all .15s;
}

.et_mobile_menu li:nth-child(1) {
    background-color: #42CAC6;
}

.et_mobile_menu li:nth-child(2) {
    background-color: #4B9BCE ;
}

.et_mobile_menu li:nth-child(3) {
    background-color: #4B7FB9;
}

.et_mobile_menu li:nth-child(4) {
    background-color: #5E5493;
}

.et_mobile_menu li:nth-child(5) {
    background-color: #5F4270;
}
.et_mobile_menu li:nth-child(6) {
    background-color: #592877;
}
.et_mobile_menu li:nth-child(7) {
    background-color: #066A91;
}

6. Style Windows Phone

This style is what I currently use for my website, and is inspired by the design of the new Windows Phone. A little tip for you is to use this style for websites that have few items in the menu, because with an extensive menu the visual result, but also the user experience, may not be the best.

menu-mobile-style-6 mobile menu divi

Code CSS for this Style
/* Nesting Menu */

/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 70px;
    right: 16px;
    cursor: pointer;
    text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 36px;
    font-size: 24px;
    text-transform: none;
    speak: none;
    content: '\33';
    color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
}

/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
}
/* make the current page's mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
}

/****** Code Style: Style Windows Phone ******/

/* Font Awesome */
.fa {
    margin: 10px ;
  }


@media only screen and (max-width: 980px){
#mobile_menu {
    display: block !important;
    min-height: 100vh;
    height: 100%;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 9998;
    overflow: scroll;
    border-top: none;
    padding-top: 80px !important;
}

.et_mobile_menu li a {
    color: #fff !important;
    width: 46%;
    float: left;
    text-align: center;
    background-color: #a46497 !important;
    padding: 11% 8%;
    margin: 2%;
    font-size: 1.2em;
}
.mobile_nav.closed #mobile_menu {
    background: rgba(51,51,51,0.95) !important;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
    background: rgba(51,51,51,0.9) !important;
}

.mobile_nav.opened #mobile_menu {
    background: rgba(51,51,51,0.95) !important;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

#main-header .container.clearfix.et_menu_container {
    width: 100%;
}

.mobile_nav.opened .mobile_menu_bar:before {
    content: "\4d";
    z-index: 9999;
    color: #fff;
    margin-right: 20px;
}
}

@media only screen and  (max-width: 980px) {
 .et_header_style_split .mobile_menu_bar, 
.et_header_style_left .mobile_menu_bar {    
    z-index: 9999;
  }
  #et-top-navigation {    
    padding-right: 5px;
  }
}

@media only screen and (min-width: 481px)  {
  #mobile_menu {    
    width: 430px;    
    margin-left: calc(100% - 430px);
  }
}

@media only screen and  (max-width: 480px) {
  #mobile_menu {    
    width: 370px;    
    margin-left: calc(100% - 370px);
  }
}

7. Style slide-in with background image

I promised I would share other styles for mobile menu, and here’s this new style is added to the previous ones, and that allows you to have a menu with slide-in effect but with a background image. Let me know what you think in the comments 😉

menu-mobile-style-7 mobile menu divi

Code CSS for this Style
/* Nesting Menu */


/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 10px;
    right: 35px;
    cursor: pointer;
    text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 36px;
    font-size: 24px;
    text-transform: none;
    speak: none;
    content: '\33';
    color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
}

/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
}
/* make the current page's mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
}

/****** Code Style: Menu slide-in with background image ******/

/* Font Awesome */
.fa {
    margin-right: 15px ;
  }

@media only screen and (max-width: 980px){
#mobile_menu {
    display: block !important;
    min-height: 100vh;
    height: 100%;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 9998;
    overflow: scroll;
    border-top: none;
    padding-top: 60px !important;
}

.et_mobile_menu li a {
    color: #fff !important;
    width: 100%;
    float: left;
    border: none !important;
    text-align: left;
    margin: 5px 10px;
    transition: .2s;
    text-transform: uppercase;
    font-size: 1.4em !important;
}
.sub-menu li a{
    font-size: 1em !important;
    }
.mobile_nav ul#mobile_menu .current_page_item > a {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding-left: 20px;
}

.mobile_nav.closed #mobile_menu {
      -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background: linear-gradient(
      rgba(66, 66, 66, 0.50),
      rgba(66, 66, 66, 0.90)
    ), /* ------ Here you can customize the overlay effect by adding the color you want in rgba format. NOTE: adding two colors you can create a gradient effect  ----- */

    url("https://www.needyesterday.com/wp-content/uploads/2018/07/bg_mobile_menu.jpg"); /* ----- Add here the url of the image you want as background ----- */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

.mobile_nav.opened #mobile_menu {
      -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background: linear-gradient(
      rgba(66, 66, 66, 0.50),
      rgba(66, 66, 66, 0.90)
    ),
    url("https://www.needyesterday.com/wp-content/uploads/2018/07/bg_mobile_menu.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

#main-header .container.clearfix.et_menu_container {
    width: 100%;
}

.mobile_menu_bar:before {
    color: #1b1d1e !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
    z-index: 9999;
    color: #fff !important;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    margin-right: 20px;
    border-radius: 50%;
}
}

@media only screen and  (max-width: 980px) {
  .et_header_style_split .mobile_menu_bar, 
  .et_header_style_left .mobile_menu_bar {    
    z-index: 9999;
  }
  #et-top-navigation {    
    padding-right: 5px;
  }
}

@media only screen and (min-width: 481px)  {
  #mobile_menu {    
    width: 340px;    
    margin-left: calc(100% - 340px);
  }
}
@media only screen and (max-width: 480px)  {
  #mobile_menu {    
    width: 290px;    
    margin-left: calc(100% - 290px);
  }
}

8. Style Slide-In di SJ James di Divi.Space

This is a style Slide-in created by SJ James Divi.Space, a fantastic example of how it can be customized the menu mobile of Divi for a simply fantastic result. Note the animation that opens and closes the menu, really fantastic!

9. Style Sleeker by James Fosker of DiviStride

Another style that I want to show was created by James Fosker of DiviStride. Sleeker has a clean design and very cool, perfect for a menu with many items.

Conclusion

Well, now in your tool-box staff you have available 9 new styles to get a unique Divi floating menu that you can customize and use as and when you want. But before you that, I’m going to add to this list the new styles, so if you want to stay up to date you can subscribe to the newsletter and do not miss the next styles.

Source JS Code Mobile Menu Collapsible Submenus

How to add custom text to the dashboard

How to add custom text to the dashboard

TIPS & TRICKS, TUTORIAL

How to add custom
text to the dashboard

Follow us on

Fabio Sarcona, Web Developer, Italy

26 Apr 2016

If you build website for your customers, this tutorial can be useful for you. In fact, with this brief tutorial, you will discover how to insert a custom message in the WordPress dashboard.

All you have to do is add this code in your function.php files, and customize the text with the name of your company, by adding your own greeting and your contacts. Of course you can also add other content and make your even more special message. 🙂

Let’s start!

Add the code in the file function.php

Download the PHP Code and paste inside your child theme in the function.php

The result

The end result should look like this: (This is the personal message that I included in my child themes.)

Now it’s your time..

Do you think you to use this code for your projects? I, for example, I added a custom message in my last child themes, you soon upgrade all other themes, inserting this short message. In this way, my clients will be able to get in contact with me quickly. You find it useful?

I am looking forward to read your comments in the comments section! 🙂

How to add a logo to the module Menu Full-Width

How to add a logo to the module Menu Full-Width

TIPS & TRICKS, TUTORIAL

How to add a logo
to the module Menu Full-Width

Follow us on

Fabio Sarcona, Web Developer, Italy

12 Apr 2016

How do I add my logo in the Fullwidth Menu module Divi Builder? Well, this is one of the most frequent questions posted by users of the community Divi, and in this article, you will discover how to add your logo and how to use it best with a custom template.

Before you begin, and well explain what the full-width module menu and what may be cases where it can be useful to use it

The Fullwidth Menu module allows you to enter a custom menu in any part of a webpage, and to use it in combination with the main menu. Often it can be useful when building a landing page and we want to create the link anchors to quickly reach the various sections or even to create custom menus depending on the user role, and much more. So, as you can understand, it is a very versatile form.

Now that you know better its purpose and its use, I’ll show you how to add your logo with a few simple lines of code.

Latest update

I wrote this tutorial in April 2016 and until a few months ago, it was not possible to get a custom menu without a hack like the one described in this tutorial. Now on Needyesterday you can find 10 Header Navigation pre-made Layouts that allow you to get a custom menu with a few and simple clicks. Check out our Amazing pre-made layouts now!

https://gyazo.com/d85bae70073084b07b26f577d9f088e2

1. Add the Fullwidth Menu Module

First, we need to create a new full-width section and add the Fullwidth Menu module.

2. Add ID custom

Now, click on the Custom CSS tab and add a custom ID univocal. An example of Custom ID might be: menu_full_custom. Save and exit. Now refresh the page and save changes.

Note: The id, unlike the classes, are used to define a single element in a page, with a unique and specific purpose, in most cases this purpose is to determine a section of an HTML page. To facilitate the understanding, you need to remember that if you have entered an ID on a page, the same ID you can not use it for another item or section.

3. Add the jQuery code

Now go to the Divi Theme Options page and click on the Integration tab and paste this code.

<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery("#menu_full_custom .et_pb_row").prepend('<a href="your Homepage url"><img src="your logo image url" class="full_menu_logo"></a>');
});
</script>

4. Add URL your Logo

Now all you need to do and add the URL of the logo and the URL of your homepage.

Note: This is a simple script that uses the .prepend function that allows you to add content to the beginning of each element. What this does is simply add to our section to which we have assigned the ID menu_full_custom, a content, in this case, your logo, to which is assigned the logo_menu_custom class.

5. Add CSS code

Add this CSS code in your options panel and in your Child Theme. This code will align left your logo:

Note: changes the value of width to change the size of the logo.

img.full_menu_logo {
float: left!important;
width: 160px;
padding: 20px;
}

6. Align right icon Hamburger

With this code the Hamburger Menu Icon, will be moved to the right:

.et_pb_fullwidth_menu .et_mobile_nav_menu {
float: right !important;
}

Conclusion

With this tutorial you found out how to put your logo in the form of full-width menu Divi Builder and how best to use it along with a custom template.

But now it’s your turn .. You found this tutorial useful? you frequently use the full-width menu module to create your pages?
I’ll wait in the comments.