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.
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.
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.
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.
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.
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.
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 😉
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.
Fabio, this is great! Thanks for taking the time to share. One question, is it possible to use these styles with the “centered inline logo” menu option? I see that you recommend using it with the Divi default menu, but is it possible to apply it to any of the other Divi menus? I’m trying to get it to work with the centered inline menu, but am having a heck of a time trying to get it to work.
Thank you very much for your feedback, I appreciate it! 🙂
I’ve never integrated these styles with the centered menu, but you can use this tutorial: https://divicio.us/snippets/make-divi-centered-centered-inline-logo-header-bars-look-like-default-header-bar-mobile/ as a starting point to find the best solution for your needs.
I hope this can help you :).
Fabio.
These are great! Such an awesome way to approach Divi Nav.
However, I am in the same boat, coming form the centered layout. I wish Divi had an option to switch header layouts on mobile.
Did you happen to get this working? If so, how? Using that link?
Hi Fabio! These are absolutely beautiful! I’m having a conflict with a vertical navigation menu on desktop, however. I would assume the media only screen max width within the CSS should prevent this, so it’s a little puzzling. Thought I’d share in case you’ve run into this elsewhere: http://calvarygigharbor.com/eventscalendar/
Notice how opening the menu opens the mobile menu here.
Still, on a mobile device it’s beautiful. Thank you!
Thanks for putting this together. Everything seems to work great except, I can’t get the close “X” to appear. What part of the code controls that?
div.mobile_nav.opened .mobile_menu_bar:before, div.mobile_nav.closed .mobile_menu_bar:before {
color: black;
top: -1.7rem;
font-size: 3em;
}
I believe this is what you’re looking for – double check that it’s not the same colour as the background it’s on?
Thanks for sharing this.
It’s work I can’t get the close “X” to appear ??
Hey guys!
I just updated the entire tutorial.
I added a new JS code that allows you to collapse the mobile menu but keep the Parent Menu Link clickable (in the previous version it was not clickable).
I have updated the CSS code of each Style Menu, tested them one by one and they work correctly. The CSS code is now inside the toggle you find underneath each screenshot.
So, add the JS code + the code of your favorite style and you’re done :).
Enjoy!
Fabio.
Same issue here. Have you been able to solve it?
Thanks, beautiful menus…….. but same here, any way we could get the code to make the x appear so we can easily close the menu without having to navigate to a new page first?
Update: I tried version 3, and it works fine. It doesn’t have an X but it has an arrow of sorts that works just fine and looks great. Thanks!
Hey guys!
as I wrote in a comment above, I just updated the entire tutorial.
I added a new JS code that allows you to collapse the mobile menu but keep the Parent Menu Link clickable (in the previous version it was not clickable).
I have updated the CSS code of each Style Menu, tested them one by one and they work correctly. The CSS code is now inside the toggle you find underneath each screenshot.
So, add the JS code + the code of your favorite style and you’re done :).
Enjoy!
Fabio.
Hi Fabio!
Your menus is awesome. My favorite is number 3, I want to use it. Like most people here I’am not a code expert. Can you, please, help with two things:
1. I need to use this menu only for primary menu and not for fullwidth menu. Now code affects to fullwidth menu and it appears is not correct. How can I turn off this menu style for fullwidth menu module?
2. I want to add “filter: blur(4px);” to the menu backgroud, it will be more beutiful. But now I just can blure the text, not a background. How can I add blure effect to background?
Thank’s! I think it will helt to more people besides me.
This is a great start. Is it possible to have a drop down for each menu and still have the parent clickable. Right now this only provides an expander next to home and the isn’t very intuitive.
Thanks
Hi Susan, I have the same issue. Did you find a solution?
Yes, please any updates on this? great work, but I also agree that an expander for each parent item that has submenu should have an icon next to it so the user knows this can be expanded.
Can you please update on this, your styles are lovely but without this they are not very intuitive or clear for the user.
Thanks
Thank you sir!
Hi Fabio!
Great work, one question. I still can scroll through the website when the mobile menu is open, can you disable this?
Cheers!
Coen
did you find the solution for this?
I was having an issue with the full screen menu, when I was customizing it kept opened, blocking my screen, so I made a slightly change to css, changing “.et_mobile_menu” to “.mobile_nav.opened .et_mobile_menu”.
Leaving here to other people that may have a similar issue 🙂
These menus work fine for my, but I tried to move the first example on the top left side. How can I do the slide-in effect from left to right, what has to be changed?
Thanks! Nico
I’ve noticed that all of these menu snippets, when installed, make my website impossible to see when editing my site via the “theme customizer”. How can I resolve this? Not ideal, really love these menu styles though!
This was so helpful and simple. Thank you so much.
Thanks Fabio!
I’m just curious about where and how you refer to font awesome?
I can’t get the icons to work.
Cheers!
Hi Fabio, great work.
Does the slide in menu (number 1) work also with extra theme?
thanks
Hi, I’m trying to implement style 2 in my code, but something weird happens on my first menu items. The first menu item contains three subtabs. There is a weird whitish box half transparent covering my first menu item. Any idea on how to fix this? I can provide screenshots if you have an email address?
Thanks a lot for these beautiful menus and your help!
Great setup, thanks so much!
Hi there!
Thank you very much! Everything works really perfect! I have only one issue with the “Style slide-in with background image” menu – now I see all the sub-categories in the menu. How can I change it to “show only main menu” and then click to open the sub menu? I have so many sub categories, so it does not look good when everything from the menu is shown …
Thank you in advance!
Thank you for sharing this, Fabio. I’m mostly a novice, but am trying to learn, and to cusomize here and there. If you would be willing, would you share the following with me:
1. Where in the code can I change to font size (I’m currently using the #6 (Windows boxes style)? My page labels are too long and the longer ones don’t appear to be centered.
2. Is there a code that can add images to each window box?
Thanks for any help.
Hi Fabio,
Do you know how I can get the slide to go away if I click anywhere outside of the slide? I’m using #1
Thanks so much for this. Very handy!
Hi, All of the items have a good aspect but I have used two of them and they do not work in theese things: when you make scroll over the menu, it never shows the bottom of the menu and you make scroll over the page not over the menu and the other issue is that the mark over the item in the menu that has sub menus, does not show over the item that has the submenu and it shows over the first item.
If you tell how to solve it, I will use it as is pretty nice.
thanks
Fabio, your English is better than most Americans. Great job on all fronts!
Very cool, but it takes over the customizer screen as an overlay: /wp-admin/customize.php
Is there any way to fix this so it works correctly in the customizer?
/wp-admin/customize.php
Awesome menus
Hi Fabio,
when I copy the js (menu 3, fullwidth) in the field “Add code to the of your blog” of Divi the system doesn’t save my changes because it crash. The loading icon try to load the changes but it never ends.
I’m using wordpress 5.1.1 . Do you have any idea about it?
Thank you!
Laura
Hey, I have added the windows style menu to my website. The issue I am now having is that the menu doesn’t always load up. Sometimes it does, sometimes it doesn’t. The only bit of code I have changed is to make the background of the menu, a transparent black faded so you can see a bit through it.
Thank you very much for these styles… I just loved it.
Hey, there great article. How about a guide to make the blog look like yours? would be great. Thanks
Hi Fabio,
Thanks for sharing this. I love it.
Is there any way that I can animate the hamburger menu?
Unfortunately, I can’t make it work with fullwidth menus (not the standard main menu). Just the first submenu is working.
Any idea for fixing it?
Ciao Fabio, complimenti e grazie per la condivisione!
Ho un unico problema: dopo aver inserito il CSS, entro nel Modificatore di Tema e mi spunta il suddetto layout anche su desktop a coprire l’homepage e il menù, impedendomi di visualizzare eventuali modifiche.
Succede solo ed esclusivamente nel Modificatore di Tema, perché entrando nel sito versione desktop, la visualizzazione del menù è corretta.
Grazie in anticipo per l’aiuto.
How to prevent body scroll when the mobile menu is opened?
These look great, but I cannot seem to get any of them working without errors. I have downloaded the JS file and added that to the code section of my blog in the Divi theme options, then I copied all of the code for menu 2, from /**** Nesting Menu ****/ down to the bottom. I am not good with coding, so not sure what I am doing wrong.
Thx for the awesome CSS
I follow the script..but not working
These are really amazing. I’m curious, is it possible to set this up so that if you have an open toggle, and then click another toggle, the first toggle automatically closes? So only one toggle would be open at a time?
Hey, i have some issues with the gradient and slide in versions.
i have 2 menus with submenus..offers and team (differnt pages for people). When i use your css there is only one “open submenu” button at the top and only the menus from “team” appear. The offers just stays as single entry.
If i use the samye json code and put in the css from that design (https://www.creativechildthemes.com/10-useful-code-snippets-for-your-divi-menu-mobile/) point 7, which acutally brought me here, it works fine. So any idea how to fix this? would love to use the gradient.
If needed i can add screenshots for explanation
Thanks, Dennis
Great code, thank you.
Now I would like to use the hamburger navigation also for the desktop. Is that possible? Thank you.
Great job man. Many thanks. I don’t have children on the menu item, just top level, so I didn’t use the JS file and many of the styles. But I saved them just in case. But the menu styling is fantastic. Looks very professional. And to think it was changed with just a few lines of CSS.
Hi,
I used the style two for me the Divi icons are not loading and also the X icon is not coming up.
You have done a great job.Thanks .But ow do I import this css code?
The submenus seem to be open by default. Is there no option for them to be collapsed or hidden by default?
You are brilliant!
I wonder why Elegant hasn’t implemented the fly-in mobile menu styling as a base option into DIVI yet. Almost everyone (users) prefer this style on their phones compared to the 2014-era dropdown they currently got running.
Hi, i need your help very urgently! I have to do it the way it looks on this website for mobile: https://www.mrbooks.com/
Hi there, thanks for sharing these! I have used these CSS snippets in the past but I am wondering if these work for menus created in the Divi theme builder. I have a feeling they do not. Please let me know before I try as I would like to save these for future use.
Thanks!