DEV Community

loading...
Cover image for Changing up Wordpress Header Logos Using CSS

Changing up Wordpress Header Logos Using CSS

mark l chaves
freelance web developer in bali indonesia. i feed stray cats & dogs.
Updated on ・4 min read

Here's another fave question I get a lot.

How do you change the site header logo to another logo for a specific page or post?

Let's see how you could do this in the Avada, Divi, Astra, and Twenty Twenty. All four methods are CSS-only solutions. I've included three snippets using a page for the example and one snippet using a post for the example. See the comments in the code for how to apply the CSS for posts or pages as needed.

How do I get the page/post ID?

Scope out this pen, for a JavaScript approach.

If you want to follow along, here's the logo I'll be using to override the default site logo.

Bali Street Photographer Logo

One caveat: for all custom CSS added to any theme, you may need the !important directive. You can always use your Firefox or Chrome dev tools inspector to verify what to override.

For example, if your logo doesn't show up at first, you might have to use !important in the code I provide below especially for the display, width, and height attributes.

Ready? Let's rock!

Different Logo for Different Pages using Avada #

This CSS will change the logo only for a page on an Avada site that's ID is 18.

/* Avada */

/** 
 * Hide the default logo. 
 *
 * For posts use .postid-2466 format.
 */
.page-id-18 .fusion-logo-link img {
    display: none;
}

/** 
 * Drop in a different logo.
 *
 * The site link is respected.
 */
.page-id-18 .fusion-logo-link {
    background-image: url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-slashes-65.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    position: relative;
    height: 65px;
    width: 65px;
}
Enter fullscreen mode Exit fullscreen mode

The Result

Avada - Changing the Logo for a Specific Page


Different Logo for Different Posts using Divi #

For Divi, let's do something exciting and change the logo for a specific post not a page. This CSS will change the logo only for a post on a Divi site that's ID is 266.

/* Divi */

/**
 * Hide the default logo. 
 *
 * For pages, use format .page-id-9
 */
 .postid-266 #logo {
    display: none !important;
}

/** 
 * Insert a different logo as a background image.
 *
 * The site link is respected. 
 */
.postid-266 .logo_container {
    background-image: url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-slashes-65.png);
    background-repeat: no-repeat;
    width: 100px !important;
}
Enter fullscreen mode Exit fullscreen mode

The Result

Divi - Changing the Logo for a Specific Post


Different Logo for Different Pages using Astra #

This CSS will change the logo only for a page on an Astra site that's ID is 4.

/* Astra */

/**
 * Hide the default logo. 
 *
 * For posts, use format .postid-49272
 */
.page-id-4 .custom-logo {
    display: none;
}

/** 
 * Let's use a different logo.
 *
 * The site link is respected.
 */
.page-id-4 a.custom-logo-link.transparent-custom-logo {
    background-image: url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-slashes-65.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    position: relative;
    height: 65px;
    width: 65px;
}
Enter fullscreen mode Exit fullscreen mode

The Result

Astra - Changing the Logo for a Specific Page


Different Logo for Different Pages using Twenty Twenty #

This CSS will change the logo only for a page on an Twenty Twenty site that's ID is 14.

/* Twenty Twenty */

/** 
 * Hide the default logo. 
 *
 * For posts use .postid-1 format.
 */
.page-id-14 .custom-logo-link img {
    display: none;
}

/** 
 * Drop in a different logo.
 *
 * The site link is respected.
 */
.page-id-14 .custom-logo-link {
    background-image: url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-slashes-65.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    position: relative;
    height: 65px;
    width: 65px;
}
Enter fullscreen mode Exit fullscreen mode

The Result

Twenty Twenty- Changing the Logo for a Specific Page


What About Retina? #

With Retina, we need to check the device using CSS media queries. Then, we can use a higher res (2x) logo. But, we still need to contain the logo so it fits in the header. We do that by fixing the background size dimensions.

Using the Avada theme as an example, you would add this extra CSS. Note the differences that I flag in the comments.

/* Media query for Retina on Avada */
@media screen and (min--moz-device-pixel-ratio: 2),
  screen and (-o-min-device-pixel-ratio: 2/1),
  screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-device-pixel-ratio: 2) {
  .page-id-18 .fusion-logo-link {
    background-image: url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-black-250.png); /* High res logo */
    background-repeat: no-repeat;
    background-size: 65px 65px; /* Instead of 100%. New for Retina. */
    display: block; /* Add !important if needed. */
    position: relative;
    height: 65px; /* Add !important if needed. */
    width: 65px; /* Add !important if needed. */
  }
}
Enter fullscreen mode Exit fullscreen mode

The Result

Retina for Avada


How Do I Get the Page or Post ID? #

Go to the page that you want to change the logo. View source. Search on <body. Look for the page or post ID class.

Getting the Post ID in Avada

How Do I Add Custom CSS?

Adding Custom CSS to Your WordPress Site


As always, shout if you've got a question.

See ya next time. Share & enjoy!

Discussion (0)