WordPress: I can't change the logo image of my site

Issue

First of all: I’ve already looked on How to change the logo of my wordpress site and I didn’t found any useful information for my problem.

In the picture you see the costume logo picture…

…and I change it, if the screen size gets smaller, with this new image:

To replace the image I must write

@media screen and (max-width: 800px){


        .logo-wrapper > .logo > img {
            background-image: url('wp-content/uploads/2017/06/new_logo.png')!important;
    }
}

But the old logo is still seen in the homepage and covered with a part of the new logo:

Solution

The old logo is probably still seen because it comes from the IMG-tag. Which will have a ‘src=”path-to-image”‘

In your CSS, you’re setting the background of the IMG-tag to ‘new_logo.png’ but the IMG might still hold an image as well.

Honestly, I’m not familiar with WP code structure, but you should look at the code where the IMG-tag resides or is generated. That’s where you’ll have to make some modifications to change the way the default logo is displayed to also be a CSS background so that your media-query would work/override default upon resolution change.

It could be something like this:

<div class="logo-wrapper">
    <a class="logo" href="<?php someCodeToGetUrl()">
        <img src="<?php getLogoUrl(); ?>" />
    </a>
</div>

A potential change could be:

<div class="logo-wrapper">
    <a class="logo" href="<?php someCodeToGetUrl()">
        <span style="background-image: url('<?php getLogoUrl(); ?>')"></span>
    </a>
</div>

At which point your media query should work. It may require some additional CSS for sizing/positioning etc.

Hope this helps. I’m sorry that I couldn’t be of more help. I don’t have enough time to install WP and check out the code for a more accurate example.

Answered By – nGAGE

Answer Checked By – Pedro (AngularFixing Volunteer)