021 158 1400 clare@woodswork.co.nz

This is a great tutorial for adding extra Divi icons to the top bar.

1. Make another menu > save it as secondary > add the phone numbers and emails etc.

2. Add a CSS class to the menu items such as these…

.pa-menu-phone

.pa-menu-email

3. Add the following CSS to the Divi CSS area…
I have edited it to be grey icons
I have added a phone and an email icon version

To get links for icons go HERE

To get a link to the tutorial go HERE

To watch the video go HERE

Code for MAIN Menu

This will give you arrows at the moment  ‘\24’

/*add icon to Divi main menu items*/

.nav li a:before {
font-family: ‘ETMODULES’;
content: ‘\24’;
text-align: center;
vertical-align: middle;
margin-right: 10px;
margin-left: -10px;
color: #a5a5a5;
font-size: 1em;
transition: all .3s ease;
}

Code for Menu DROPDOWN Items

This will give you arrows at the moment  ‘\24’

/*add icon to Divi main menu dropdown items*/

.nav li li a:before {
font-family: ‘ETMODULES’;
content: ‘\24’;
text-align: center;
vertical-align: middle;
margin-right: 10px;
margin-left: -10px;
color: #a5a5a5;
font-size: 1em;
transition: all .3s ease;
}

Code for secondary menu using classes

.pa-menu-phone > a:before {
font-family: ‘ETMODULES’;
content: ‘\e090’;
text-align: center;
vertical-align: middle;
margin-right: 5px;
margin-left: -10px;
color: #a5a5a5;
font-size: 1em;
transition: all .3s ease;
}
.pa-menu-email > a:before {
font-family: ‘ETMODULES’;
content: ‘\e076’;
text-align: center;
vertical-align: middle;
margin-right: 5px;
margin-left: -10px;
color: #a5a5a5;
font-size: 1em;
transition: all .3s ease;
}

We used this on the following sites:

Urban Civil

Looking to get your business seen? Then see us.

Web Site Developer Auckland | North Shore | Matakana | Warkworth | Omaha

Call 021 158 1400 for Web Design North Shore, Auckland

Share This