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.
Added only the switch logo snippet to my child theme. It works great in Chrome but not FF or IE. Any idea how I can get this to work cross browser?
Hi Theuns, I’ve tested it on mobile Firefox app and it works. Do you have a URL that I can look at? I assume you’re switching logos when your site is viewed on a mobile device.
Thanks for the help.
I have a logo centered with menu underneath and when scrolling up logo removed and menu fixed.
In phone view your code changes logo image but does not enlarge? Any idea why?
Maybe I need to add that I have used this css. to tweak my menu box.
Navbar fix
*/
#top-menu-nav, #top-menu {
line-height: 0px;
margin: 0px 0px -14px 0px;
padding: 0px;
}
#main-header.et-fixed-header .logo_container {
height: 15px !important;
}
Maybe this force the logo in phone view to stay small?
O and I wike with Divi3
Hi Berend, can you share a link to the site?
Hello! My menu and logo appear really wonky on my mobile site. I added that custom CSS and nothing happened….do I need to do something else as well? http://www.thewaywardhome.com
Hi Kristin, you could try the following CSS, it’ll drop your menu hamburger to the bottom of the header:
@media only screen and (max-width: 981px) {
#logo {
padding-bottom: 0;
}
}
The tutorial was written for Divi and not Extra so their might be a few discrepancies. The two themes sometimes use different class names, elements etc.
Thank you!! I still can’t get the hamburger centered for some reason, but I think I can just leave it 🙂 Thanks for your awesome tutorial!
This is really helpful thank you, however when browser window is reduced in size, the logo changes but the size of the logo doesn’t. Any ideas?
I can’t make the mobile logo work. It simply spells out my page name and doesn’t show the image at all.
Can you share a link to the site?
hi rob, i have the same problem. the logo doesn’t increase size on mobile…
Try replacing the quotation marks after you’ve pasted the code. It might be that the quotes are being converted in the coping process.
The code is working, but the logo continues to decrease in size as the window decreases, so the logo is good on tablet but tiny on mobile still? Divi already tried to fix this and failed to address this issue.
I found this blog when I was looking for a solution for a site that my digital marketing agency is building for a client. While the CSS tips above could work, I found a much simpler solution:
To increase the logo on a mobile, simply use this:
@media (max-width: 980px)
.et_header_style_left #logo, .et_header_style_split #logo {
max-width: 75%;
}
Note, You can change the max-width. Divi sets it up to 50%. You can increase it a bit. 75% would work most of the times. If you increase it more than that, it might not look so well with the hamburger menu.
Rob, I can’t get the mobile logo to work. I’ve tried all the tricks you and others have suggested. Here’s my site: https://pafenorthwest.org. Thanks for any help!
With some experimenting, and reading general HTML and CSS site, I sort of got this to work. I am testing on Edge on a PC. the Content thing didn’t work. I had to do this:
@media only screen and (max-width: 980px) {
#logo {
background: url(“/wp-content/uploads/2019/10/PAFE-Mobile-Banner.png”);
background-repeat: no;
width:0px; height:0px; padding-left: 105px; padding-top:50px;
}
}
I have to set the padding values to exactly match my mobile logo size. This works great when I shrink my browser widow size and on an ipad. It doesn’t work on my iPhone 7 – still uses the larger logo.