Changing header image for mobile site

Thanks for choosing Unlimited!

Could you share a link to your site? Once I check it out, I can share some CSS to make this customization.

Thanks Ben! rainydayswithmandy.com

Great, thanks!

Because the image is coming from the Logo, it is using an img element, rather than a background image like in the other example. This means it can’t be modified with CSS, but I can put together a “child theme” for you that can change the image for mobile devices.

I just need the URL to the image that you want shown on the mobile versions, and then I can create the child theme.

Thanks so much Ben! I will get back to you with an image URL tonight after work. ??

Here’s an image URL for you: https://www.rainydayswithmandy.com/wp-content/uploads/2015/10/mobile-logo.png

Let me know if you need me to resize the image (it’s pretty large right now). Thank you again for your help!

Great, thanks!

The child theme is going to let you use any logo you want from the Customizer, and it will always use the image linked to above for mobile devices. Here’s the child theme:

Click here to download child theme

It will take a few steps to activate the child theme, but there won’t be any technically challenging steps along the way.

Here’s how you can activate the child theme:

1. Install and activate the Customizer Export/Import plugin
2. Visit the Customizer
3. Click on the Export/Import section at the bottom
4. Click the Export button to export your settings

You now have a .dat file you can use to import your settings when the child theme is active. Now it’s time to activate the child theme:

1. Go to the Appearance menu
2. Click on the “Add New” button at the top of the page
3. Click on the “Upload Theme” button at the top of the page
4. Click on the “Choose File” button
5. Select the unlimited-child.zip file you downloaded from the link above
6. Click “Install Now”
7. Once the page reloads, click the blue “activate” link

At this point, the child theme is now active, and the logo will be switching at mobile screen widths. The last step is to import your settings:

1. Visit the Customizer
2. Click on the Export/Import section at the bottom
3. This time, click the Choose File button and select the .dat file you exported
4. Click Import

Once complete, the only difference between your site will be the change to the logo.

Ben, thanks so much for doing this! One quick question before I proceed with installing the child theme. I am already using a child theme that I’ve used to make a few CSS customizations. Will exporting my settings and then re-importing them into the new child theme retain those customizations?

You’re welcome!

The import/export will transfer your menu locations and all the settings in the Customizer, but not customizations you’ve made with files in the child theme.

What kind of changes have you made with your child theme? They can be transferred too, the process is just a bit different. For instance, any changes in the style.css file can simply be copied and pasted from your current child theme’s stylesheet into the new child themes stylesheet.

OK, that seems easy enough. The changes I’ve made are minor tweaks to the style.css file, such as reducing the amount of space around the logo image.

It worked perfectly! Your instructions were very clear and the mobile logo looks exactly like I want it to. Yay!

Thanks a lot for taking the time to create the new child theme for me, Ben.

So I have one follow-up question. If I ever wanted to change the mobile logo to a different image, how would I do that?

Ah, never mind. Figured out where the URL is in the child.js file.

No problem, I’m glad you like it ??

Don’t hesitate to contact me if anything else comes up, and I’ll be happy to help.