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;
}