Hi, I thought this was working great, but the icons only show up on the home page, and on mobile/tablet the icons are completely different!? Any advise. I'm using DIVI Version: 4.17.3. Thank you in advance :)
Hello! I have followed your tutorial but unfortunately the icons do not display I have instead white square with a question mark what do you think happened? Thanks for your help
Awesome work. It works and it looks amazing. Do you know how you can make it to be only icon when on mobile devices? With your tutorial it's for the hole thing. But what about if you want the text on desktop but only the icon on mobile ?
Hello Josh, thank you very much for that tutorial! I was trying out a bit but couldn´t figure out how to use regular fonts in the drop down menu futher on. The text only will show as icons. (ETModules) Could you maybe help me out with that?
Funny, I have that on my list but word on the street is Divi is going to be releasing some header options soon so I'm hesitant to put a bunch of time into a tutorial on that then a week later the new options come out :) If it doesn't happen soon I'll definitely consider that.
Thanks Josh! Was wondering though...I have FontAwesome Pro.. how would I use THAT instead of ETModules as the font source? (what needs to be uploaded and where? does it need to be enqueued or just called in with the font-family line?)
To be honest I never use Font Awesome so I'm not for sure but this tutorial might help! www.elegantthemes.com/blog/divi-resources/how-to-add-social-icons-to-divis-primary-menu
HI there, This worked amazing! Thanks... I have one issue though... my mobile menu has a white background so i need it to show a different color on mobile. What is the css code i would add for mobile? Thanks for your awesome videos, you have helped me a lot in my new divi endeavors!
Make sure you have the font family and css in and that the cache is cleared and browser is refreshed. I'm on the latest version and it works fine for me.
It's pretty clear you didn't watch the video. It's an addition to my previous video yes but it is still a new method when adding just an icon. Take 8 minutes to watch the video and your desire for a cool new Divi video will be fulfilled.
I'm concerned by this approach which breaks accessibility With that solution there is no meaningfull label nor any alternative text in your menu items I prefer the approach in which we keep the text but move it offscreen using ' text-indent: -9999px;' + use ':after' to show the icon with 'text-indent: 0px;' & 'content: ' for the selected icon code Moreover I definitely prefer to keep the labels for the mobile menu With the icon in the CSS I can target my menu representation
![How To Make A Custom Shop Page With Divi Theme [Divi WooCommerce Tutorial]](/img/n.gif)
Awesome work, Josh! Super helpful and another way to be different or more creative on different styles of projects.
Thanks, John! Yeah little tricks like this really help take Divi to the next level :)
Hi, I thought this was working great, but the icons only show up on the home page, and on mobile/tablet the icons are completely different!? Any advise. I'm using DIVI Version: 4.17.3. Thank you in advance :)
Hello!
I have followed your tutorial but unfortunately the icons do not display I have instead white square with a question mark what do you think happened? Thanks for your help
Awesome work. It works and it looks amazing.
Do you know how you can make it to be only icon when on mobile devices? With your tutorial it's for the hole thing. But what about if you want the text on desktop but only the icon on mobile ?
is not working to me ...
My question is. How do we add an actual image of our choice, not a simply icon? Great video by the way
Hello Josh,
thank you very much for that tutorial!
I was trying out a bit but couldn´t figure out how to use regular fonts in the drop down menu futher on. The text only will show as icons. (ETModules) Could you maybe help me out with that?
Josh, it would be great if u could make a tutorial on Custom Header,
Where a logo in left side and phone number in right side,
TIA
Funny, I have that on my list but word on the street is Divi is going to be releasing some header options soon so I'm hesitant to put a bunch of time into a tutorial on that then a week later the new options come out :) If it doesn't happen soon I'll definitely consider that.
Awesome, Josh!
Thank you. Very useful. Saved me a lot of time. :-D
Thanks Josh! Was wondering though...I have FontAwesome Pro.. how would I use THAT instead of ETModules as the font source? (what needs to be uploaded and where? does it need to be enqueued or just called in with the font-family line?)
To be honest I never use Font Awesome so I'm not for sure but this tutorial might help! www.elegantthemes.com/blog/divi-resources/how-to-add-social-icons-to-divis-primary-menu
HI there, This worked amazing! Thanks... I have one issue though... my mobile menu has a white background so i need it to show a different color on mobile. What is the css code i would add for mobile? Thanks for your awesome videos, you have helped me a lot in my new divi endeavors!
@@sydneyfarthing5791 Thank you for your reply, however, I am still new and ignorant so what is a media query and how would i create that?
Great tutorial,
Nice trick
Brilliant
not work in the last version of divi .. only get an a
Make sure you have the font family and css in and that the cache is cleared and browser is refreshed. I'm on the latest version and it works fine for me.
To heavy for me.
You already shown this in the previous video. Try to upload new content brother
....waiting for something cool divi video
It's pretty clear you didn't watch the video. It's an addition to my previous video yes but it is still a new method when adding just an icon. Take 8 minutes to watch the video and your desire for a cool new Divi video will be fulfilled.
@@JoshHallcoi already watched..hope you will bring cool videos like this one Thanks Brother
Definitely will, Mudassir. Got some cool new stuff in the works!
I'm concerned by this approach which breaks accessibility
With that solution there is no meaningfull label nor any alternative text in your menu items
I prefer the approach in which we keep the text but move it offscreen using ' text-indent: -9999px;' + use ':after' to show the icon with 'text-indent: 0px;' & 'content: ' for the selected icon code
Moreover I definitely prefer to keep the labels for the mobile menu
With the icon in the CSS I can target my menu representation
content: "" it doesn`t work anymore
Need to make sure you add the CSS as well that's provided in the post then you're all set. Still works.
@@JoshHallco it went well was my mistake thanks