9 AM - 9 PM

<style>.mobile_nav::after { content:'MENU'; vertical-align:top; line-height:1.1em; color: #000000; }span.mobile_menu_bar:before { color: #36BFF2 !important; } span.mobile_menu_bar:after{ color: #000000 !important; }.et_mobile_menu .menu-item-has-children > a { background-color: transparent; } #main-header .et_mobile_menu li ul.sub-menu.hide { display: none !important; visibility: hidden !important; transition: .7s ease-in-out; } #main-header .et_mobile_menu li ul.sub-menu.visible { display: block !important; visibility: visible !important; }.et_mobile_menu .menu-item-has-children > a:after { font-family: "ETmodules"; font-size: 15px; font-weight: 800; content: "3"; color: position: absolute; right:37px; } /* Font Awesome */ .fa { margin: 6px ; } @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: #ffffff !important; width: 46%; float: left; text-align: center; background-color: #e8e8e8 !important; padding: 15% 4%; margin: 1%; font-size: 1.1em; } .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"; color: #fff; } } @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: 370px; margin-left: calc(100% - 370px); } } @media only screen and (max-width: 480px) { #mobile_menu { width: 320px; margin-left: calc(100% - 320px); } } @media only screen and (max-width: 340px) { #mobile_menu { width: 100%; margin-left: 0; } } </style>

Best Way to have Different Menus for Full and Mobile Sites

Creating a page called Mobile and using the blank template is all you need to do. You can grab one of our Divi Mobile Designs from our store or build your own.

Creating a page called Mobile and using the blank template allows you tons of flexibility with the look and feel. Create a new menu and call it mobile menu and add what pages you want.

Keep in mind you really don’t need a navigation menu at all when creating a mobile page, since you create your button nav links right on the page itself.

Once you have a blank page template, start adding your sections,rows and modules. Every column should be full width and images should not exceed 300px wide. Because too many devices are still out there with a CSS pixel width of 320.

I usually create my rows like this.
Full Width Navigation. (If needed)
Impact Statement or Slogan
Tap to Call
Slider if you want one.
Text Module for adding your button tabs.
Social Icons

Follow us on Facebook and ask questions. We are here to help.