Websites will be shown more often on mobile devises than on desktop computers. Divi is great and creates automatically different responsive designs for different display sizes. For huge sites with lots of links a hamburger menu is great but I wanted to have an app like experience on my own new website with a simple symbol navigation similar to apps we use every day on our smartphones.

In this tutorial I will show you how to code an app like navigation for Divi websites.

Preparation

First we need to create a new navigation which will shown on mobile devices. Go to Backend Appearance/Menu and click “create a new menu”. Choose a wise name like “mobile app nav” to know which one is your mobile navigation.

Because of the limitation in width on smartphones in portrait mode I recommend only to use 4 to 5 symbols or links. I choose in my case “home”, “portfolio”, “kontakt” and “anruf”.

Icons

For the icons I use the same icon font like Elegantthemes. A detailed information about the font and how to use it for your project is shown on Elegantthemes website: The Elegant Icon Font
You can use your own font, symbols or pictures if you want to create unique look and feel of your projects.

There are different possibilities to design the icons in a navigation. In my case I am using in the Link-Name a span-tag with its own Class to style my links easily by css.

The “Call-Link” is a “individual Link”. For URL I wrote “tel:+12345…”. You can use any phone number and your smartphone will detect this link to make a call.

CSS Code for Symbols

Copy the following css code into your “styles.css” of your Child Themes or into “Custom CSS” of “Divi-Theme-Options”. The part “content:” shwos the unicode for the symbols (see The Elegant Icon Font ). Don’t forget to change the class names to your own used ones.

/*---global changes for all symbols---*/
.ff_icon_house::before, 
.ff_icon_contact::before, 
.ff_icon_portfolio::before, 
.ff_icon_phone::before {
 position:relative;
 font-family: 'ETmodules';
 font-size: 1.8em;
 display: block;
 line-height: 0.1em;
 }
.ff_icon_house::before {
 content: "\e074"; /*Homesymbol*/
 }
 .ff_icon_portfolio::before {
 content: "\e072"; /*Bulpsymbol*/
 }
.ff_icon_contact::before {
 content: "\e076"; /*Mailsymbol*/
 }
.ff_icon_phone::before { 
content: "\e090"; /*Phonesymbol*/
}

Place your navigation

Next we need to place our navivagation on a site. Open one site, and create a “Fullwidth Section” with a “Fullwidth Menu” module at the end of the page. Choose in “Fullwidth Menu Module” in “General Settings” your “mobile app nav”.

Change the “Fullwidth Section” with right click into a “Global Element” (color changes to green), so we can place the same navigation on all sites using the “divi bilbiothek”. Last we gave our section an own “CSS-ID” so we can design our menu easily. In my case the ID is “ff-mobile-nav”.

CSS Code for your mobile navigation

Again we need some css to style our navigation. Copy the following coder to your child themes “styles.css” or into “Divi-Theme-Options” in “Custom CSS”.

First of all we need to turn off the mobile menu completely. So we need our “ID” of the “Fullwidth Section”. Later we will turn on the mobile navigation on smartphones.

#ff-mobile-nav {
 display: none;
}

The next CSS-Code defines the look and feel of the mobile app navigation like on my site here: www.flyingfox-web.com. You can change the attributes to create your own styles.

/*-turn off mobile Hamburgermenu-*/
#ff-mobile-nav .et_mobile_nav_menu {
 display: none;
}
/*-turn on normal menu-*/
#ff-mobile-nav .et_pb_fullwidth_menu .fullwidth-menu-nav { 
display: block !important; 
}
/*-values for height of the ul li box-*/
#ff-mobile-nav .et_pb_fullwidth_menu .et_pb_row {
 min-height: 50px;
}
#ff-mobile-nav .et_pb_fullwidth_menu .fullwidth-menu-nav > ul.upwards > li {
 padding-top: 20px;
}

#ff-mobile-nav .fullwidth-menu li > a {
    padding-bottom: 0;
}
/*-Row mobile menu for full displaywidth-*/
#ff-mobile-nav.et_pb_fullwidth_section .et_pb_row {
 margin: 0 !important;
 padding: 2px 0 5px !important;
 width: 100%;
}
/*-Section Mobile Menu full width and fixed position-*/
#ff-mobile-nav {
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 9999999;
}
/*-space from text to symbol-*/
#ff-mobile-nav .et_pb_fullwidth_menu .fullwidth-menu-nav > ul.upwards {
 padding: 0 0 2px !important;
}
/*-place links equally on width-*/
/*-gleichmäßige Verteilung der Icons auf volle Breite-*/
#ff-mobile-nav .et_pb_fullwidth_menu .fullwidth-menu-nav > ul {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   flex: 1 1 60%;
   /* Android 2.3 understands the first declaration and ignores the second */
   justify-content: space-between;
   /* Modern browsers overwrite the first declaration with the second */   
   justify-content: space-around;
padding: 20px 0 0 !important; }
/*-Schriftgröße und zentriert-*/
#ff-mobile-nav .fullwidth-menu li {
    display: inline-block;
    font-size: 14px;
    text-align: center;
padding-right: 0;
}
/*-color of link-*/
#ff-mobile-nav ul li.current-menu-item a, #ff-mobile-nav ul li.current-menu-item a:hover{
 color: rgba(209, 0, 90, 1) !important;
}
#ff-mobile-nav .et_pb_bg_layout_dark.et_pb_fullwidth_menu ul li a:hover {
 color: rgba(255, 255, 255, 1);
}
#ff-mobile-nav .fullwidth-menu a:hover {
 opacity: 1;
}

Turn on your app style navigation – media queries

At the end we need to tell our website when to show and hide our mobile app navigation. For that I am using media queries so I can exactly force on different devices the design of my page. Copy the following css code to the end of your css stylesheet of your child-theme.

If you want to show the app-like navigation only on smartphones in portait and landscape mode delete the following coder “, all and (max-width: 768px)” from the first line. “(max-width: 768px)” is necessary to force the iPad to show our app navigation in portrait mode.

/*---Responsive Styles Smartphone Portrait-----*/
@media all and (min-width: 300px) and (max-width: 767px), all and (max-width: 768px) {
/*-ausblenden der Standardnavigation im Header-*/
.et_header_style_left .et-fixed-header #et-top-navigation, .et_header_style_left #et-top-navigation {
display: none;
}
/*-Einlbenden des Footer mobilen Menüs auf voller Breite-*/
#ff-mobile-nav {
 display: block !important;
}
}

Conclusion

The numbers of handheld devices with high end displays are rising daily. So it could be that the code needs to adjust in future ro fit to new modes of tablets and smartphones. May be you need to adjust this tutorial for your needs depending on your design. The following example of my own page shows this tutorial in action: www.flyingfox-web.com.

Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission.