Changing up Wordpress Header Logos Using CSS
Tags: wordpress, logo, theme, css
Published: 2020-04-18 11:56:15

---
title: Changing up Wordpress Header Logos Using CSS
published: true
description: How to change the default header logo on specific pages in Wordpress.
tags: wordpress,logo,theme,css
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7aaiisrv5tp6on2wofpp.jpg
---

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?](#page-post-id)

Scope out [this pen](https://codepen.io/marklchaves/pen/poJWYym), 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](https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-slashes-65.png "Bali Street Photographer Logo")](https://balistreetphotographer.com/branding/)

One **caveat**: for all custom CSS added to any theme, you may need the `!important` directive. You can always use your [Firefox](https://developer.mozilla.org/en-US/docs/Tools) or [Chrome](https://developers.google.com/web/tools/chrome-devtools/) 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!

<a name="avada">
## Different Logo for Different Pages using Avada [&#35;](#avada)

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

```css
/* 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;
}
```

### The Result

![Avada - Changing the Logo for a Specific Page](https://dev-to-uploads.s3.amazonaws.com/i/rf6keyw2f6bvaayf7lgj.jpg "Avada")

---

<a name="divi">
## Different Logo for Different Posts using Divi [&#35;](#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.

```css
/* 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;
}
```

### The Result

![Divi - Changing the Logo for a Specific Post](https://dev-to-uploads.s3.amazonaws.com/i/ab6tnuqtpgrl8qr6ny0f.jpg "Divi")

---

<a name="astra">
## Different Logo for Different Pages using Astra [&#35;](#astra)

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

```css
/* 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;
}
```

### The Result

![Astra - Changing the Logo for a Specific Page](https://dev-to-uploads.s3.amazonaws.com/i/v10ustab7gq1dyyus1zy.jpg "Astra")

---

<a name="twenty">
## Different Logo for Different Pages using Twenty Twenty [&#35;](#twenty)

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

```css
/* 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;
}
```

### The Result

![Twenty Twenty- Changing the Logo for a Specific Page](https://dev-to-uploads.s3.amazonaws.com/i/sz3wjd7mz9hn5pwmx5xu.jpg "Twenty Twenty")

---

<a name="retina">
## What About Retina? [&#35;](#retina)

With Retina, we need to check the device using [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_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.

```css
/* 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. */
  }
}
```

### The Result

![Retina for Avada](https://dev-to-uploads.s3.amazonaws.com/i/hpmsa3m5adboh0xlzrwv.jpg "Retina for Avada")

---

<a name="page-post-id">
## How Do I Get the Page or Post ID? [&#35;](#page-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](https://dev-to-uploads.s3.amazonaws.com/i/bjex3m6m09p2170zhntm.png "Getting the Post ID in Avada")

## How Do I Add Custom CSS?

[Adding Custom CSS to Your WordPress Site](https://medium.com/@marklchaves/adding-custom-css-to-your-wordpress-website-how-to-guide-a50b474af36d)

---

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

See ya next time. Share & enjoy!