In this tutorial, I’m going to show you how to use a different logo image for your Divi site and also how to change the mobile logo size and increase the letter spacing and font size of the mobile menu text. Switching out the logo and increasing it’s size on smaller screens comes in handy when you have a logo that doesn’t work so well on mobile devices. Increasing the font size and letter spacing can also make your mobile menu more readable.
Switch Divi’s Mobile Logo
Add the following CSS to your child theme’s style.css file. If you’re not using a child theme or you prefer, you can add CSS to the Divi Theme Options panel (look for Custom CSS at the bottom of the General tab). For a more indepth guide, head on over to Adding CSS to the Divi Theme by divibooster.com.
Here the media query triggers the CSS between the curly braces if the screen width is less than or equal to 980px. If you want to explore Divi’s responsive breakpoints further, check out the article How to Identify Divi’s Responsive Breakpoints and Fine Tune Your Designs with Media Queries on elegantthemes.com.
Increasing the Letter Spacing & Font Size on the Divi Mobile Menu
If your menu consists mostly of short words you might want to increase the letter spacing and font size. Again, just add the following CSS to wherever you prefer to put it and adjust the letter spacing and font size as you want. You can increase the font size using the Mobile Styles in the Theme Customizer but if this doesn’t work for you, you can implement it with this little bit of CSS.
Increase The Mobile Logo Size
Okay, now that we’re done switching the mobile logo and playing around with the menu text, let’s jump into making that logo bigger.
Add the following CSS to wherever you prefer to put this stuff (you better be using a child theme by now).
Here’s where you define the mobile menu bar height, position the hamburger (the three horizontal lines used to indicate the menu), and the amount of space of the menu bar that the logo is allowed to use. So the padding in the first bit of CSS defines how tall the menu bar will be, the second bit of CSS moves the hamburger down (assuming you want to do that), and the third sets how much space the logo can take of the top menu bar.
The End
There you have it, a bigger and different logo for mobile devices, and bigger text for your mobile menu.
If you’ve got any questions or comments, feel free to add them to the comments below.