Mobile menus come in all different styles. There are vertical sliding menu, dropdown menu, tree menu and others. DIVI theme already has a built-in mobile menu styles that you can use but can be customized for better user experience.

In this tutorial, we will be creating an awesome menu that looks like app icons on phones.

 

Let’s Get Started

By default, Mobile menu looks like this:

We will create a menu with a design like this:


 

Instructions

In this tutorial, we’re going to create the above designs using CSS styles. We’ve created snippet that you can copy and paste to your DIVI websites. Pretty easy!

 

STEP 1: Set the Fullscreen header style on Customizer

1. On WordPress Dashboard, under appearance, click Customizer. Select Header & Navigation then Header Format. Under Header Style, select Fullscreen. Then Save.

 

 

 

STEP 2: Integrate font awesome

1. On WordPress Dashboard, under Appearance, click DIVI Theme options. Under Integration tab, put this code:

<script defer="" src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

to screenshot provided.

 

STEP 3: Add icons on menu navigation using image files and font awesome icons

You can use either image files or font awesome icons for each item. The screenshot below shows the items where I used image files and font awesome icons.
 

Here are the codes:

For Font Awesome Icons

<i class-“fa="" fa-home”=""></i> and the menu title 

For Image Files

<img scr="”(image" link="" coming="" from="" the="" media="" library)”=""> and the menu title

 

STEP 4: Display traditional menu on Desktop while displaying the new mobile menu on smaller screen sizes.

This code is to disable fullscreen menu and display the default navigation on screen sizes with 980px and above


.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
    opacity:  1;
    background:  transparent;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide {
    padding:  0 !important;
    display:  block !important;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li {
    display:  inline-block;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li img, .et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li i, .et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li svg.svg-inline--fa {
    display:  none;
}

.et_slide_in_menu_container {
opacity:  1 !important;
}

.et_pb_fullscreen_nav_container {
    opacity:  1;
}




.et_pb_fullscreen_nav_container ul#mobile_menu_slide {
    opacity: 1!important;
    visibility: visible;
    display: block!important;
    text-align: right;
    width: 100%;
    padding-right: 22%;
    height: initial;
    padding-top: 9px;
}

.et_pb_fullscreen_nav_container ul#mobile_menu_slide li {
    display:  inline-block;
}

.et_pb_fullscreen_nav_container ul#mobile_menu_slide li img, .et_pb_fullscreen_nav_container ul#mobile_menu_slide li i {
    display:  none;
}

.et_pb_fullscreen_nav_container ul#mobile_menu_slide li {
    padding:  0 2%;
}

.et_pb_fullscreen_nav_container ul#mobile_menu_slide li a {
    font-size:  17px;
    text-transform:  uppercase;
}

span.mobile_menu_bar.et_pb_header_toggle.et_toggle_fullscreen_menu {
    opacity:  0;
}

div#page-container[style="padding-top: 96px; overflow-y: hidden; margin-top: -43px;"] {}

div#page-container[style="padding-top: 96px; overflow-y: hidden; margin-top: -43px;"] ul#mobile_menu_slide li a {
    font-size:  13px;
}

div#page-container[style="padding-top: 96px; overflow-y: hidden; margin-top: -43px;"] ul#mobile_menu_slide li {
    margin-top: -15px;
}

div#page-container[style="padding-top: 96px; overflow-y: hidden; margin-top: -43px;"] ul#mobile_menu_slide {
    margin-top: -14px;
}

You have 2 options:

1. Paste it into page Custom CSS
2. Paste it on DIVI theme options or CSS style.

 

STEP 5: Display mobile menu on tablet and mobile devices ( 980px and below ).


@media screen and (max-width: 1190px){
.et_pb_fullscreen_nav_container ul#mobile_menu_slide {
    padding-right: 8%;
}
}

@media screen and (max-width: 980px){
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
    max-width: 499px;
    margin: 0 auto;
}
header#main-header {
    padding: 5px 0;
}
span.mobile_menu_bar.et_pb_header_toggle.et_toggle_fullscreen_menu {
    opacity: 1;
}
.et_pb_fullscreen_nav_container ul#mobile_menu_slide {
    display: none !important;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
    background: url(https://say-eat.gocrayons.com/wp-content/uploads/2017/12/gallery-8.jpg) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    padding-bottom: 72px;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated:before {
    width:  100%;
    height:  100%;
    position:  absolute;
    left:  0;
    right:  0;
    top: 0;
    content:  '';
    background: rgba(0, 0, 0, 0.61);
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide {
    display: table-cell!important;
    position: relative;
    width: auto;
    height: 100%;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li {
    display: block;
    width: 33.3%;
    float: left;
    padding-bottom: 6vh!important;
    padding-right: 0!important;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li i:before {
    font-size:  38px;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li img {
    padding: 18px 19px!important;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li img, .et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li i, .et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li svg.svg-inline--fa {
    display: block;
    background: #f66d41;
    width: 75px;
    height: 75px;
    padding: 18px 0;
    border-radius: 15px;
    margin-bottom: 24px;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
}
body #page-container .et_slide_in_menu_container {
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
}
.et_header_style_fullscreen .et_slide_in_menu_container span.mobile_menu_bar.et_toggle_fullscreen_menu:before {
    border: 1px solid #f66d41;
    color: #f66d41;
    border-radius: 50%;
    padding: 6px;
}
.et_header_style_fullscreen .et_slide_in_menu_container span.mobile_menu_bar.et_toggle_fullscreen_menu {
    bottom: 25px !important;
    top: initial!important;
    left: 0;
    right: 0;
    text-align: center;
}
}

@media screen and (max-width: 414px){
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li img, .et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li i, .et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li svg.svg-inline--fa {
    display: block;
    background: #f66d41;
    width: 60px;
    height: 60px;
    padding: 14px 0;
    border-radius: 15px;
    margin-bottom: 24px;
    margin: 0 auto 10px;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li img {
    padding: 15px 16px!important;
}
}

You have 2 options:

1. Paste it into page Custom CSS
2. Paste it on DIVI theme options or CSS style.

 

Questions?

If you have any issues or questions, feel free to message in the comments box below.

Pin It on Pinterest

Share This