Switch to a simpler logo on a Divi mobile site

A beautiful GIF of a window resizing and the logo changing.

Watch the logo in the top left corner. You can choose to display any image you’d like.

 

When over half of the world is browsing on mobile devices, it’s a good idea to put some extra time into making sure your websites look perfect on them. Luckily, I’ve done some of the heavy lifting for you. If you’re using Divi, you can easily show a different (i.e. simpler) logo on mobile with some CSS.

This is especially helpful for people who have complex logos and simpler counterparts, or those who want to achieve a more minimalistic feel on mobile devices where content becomes more cramped. Here’s how to do this in a few seconds with some CSS:

1. Upload your “mobile” logo to your website and grab its URL.

To do this, just navigate to your admin dashboard, hover over “Media” and click “Add New”, then select the file from your computer. Once it uploads, click the small “Edit” link that appears on the right side of the page. Copy your uploaded file’s URL on the right and paste it into a Word document or plain text file for later.

2. Add the following CSS to your website. (how to edit CSS)

@media only screen and (max-width: 981px) {
  /* Changes mobile logo to specified image */
  #logo {
    content: url("http://site.com/logo.png");
  }
}

3. See the line that says content: url(“…”); in Step 2? Add the URL you grabbed from Step 1 between the quotes. Make sure it starts with http:// or https:// and is still surrounded by the quotation marks.

4. Save your changes, then take your website on a test drive. When it works, high five your computer screen! …wait, no, don’t do that. That’s probably a bad idea.

If you’re a Divi designer and you like free things, you should check this out.

Hello there, Divi designer!

Designing can be tough, but you can make it easier. Receive four free emails on eliminating stress, using Divi's magical powers to work smarter, raising your rates, and automating the administrative dullness in your practice so you can focus on doing what you love.

Sign Up