# Show different header logo based on category?
**URL:** https://meta.discourse.org/t/show-different-header-logo-based-on-category/167294
**Category:** Development
**Created:** [October 15, 2020, 2:37pm UTC](https://meta.discourse.org/t/show-different-header-logo-based-on-category/167294 "2020-10-15T14:37:55Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@pacificmeister](https://meta.discourse.org/u/pacificmeister)
#### Post date: [October 15, 2020, 2:37pm UTC](https://meta.discourse.org/t/show-different-header-logo-based-on-category/167294/1 "2020-10-15T14:37:55Z")
Is there a way to show a different main logo in the header (top left) when browsing threads within a certain category or their sub categories? Thank you.
---
### Author:  [@Qursch](https://meta.discourse.org/u/Qursch)
#### Post date: [October 15, 2020, 3:20pm UTC](https://meta.discourse.org/t/show-different-header-logo-based-on-category/167294/2 "2020-10-15T15:20:57Z")
I believe the body includes a class `category-{category here}`, which you could use to change category specific CSS.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [October 15, 2020, 4:29pm UTC](https://meta.discourse.org/t/show-different-header-logo-based-on-category/167294/3 "2020-10-15T16:29:23Z")
I don’t know how to execute a script after the page content have loaded (I’m interested to know that too!), but for changing the logo image, you could do this:
```js
// in a condition like if category == "somecategory" then…
document.getElementById("#site-logo").src = settings.theme_uploads.logo_cat1;
```
where `logo_cat1` is the variable name of a custom logo:
---
### Author:  [@bangkarlsen](https://meta.discourse.org/u/bangkarlsen)
#### Post date: [April 17, 2024, 7:43pm UTC](https://meta.discourse.org/t/show-different-header-logo-based-on-category/167294/4 "2024-04-17T19:43:32Z")
I recently had this problem also. I realise this is an old topic, but here’s a solution in case someone comes by.
You can use CSS and utilize the classes on the `body` element to detect which category you are in.
```plaintext
// Dont show regular site logo
body.category-something #site-logo {
display: none;
}
// Show another image in the title
body.category-something .home-logo-wrapper-outlet {
height: 50px;
width: 100px;
background-image: url($category-something-image);
}
```
Hope that makes sense 🙂
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [April 17, 2024, 8:18pm UTC](https://meta.discourse.org/t/show-different-header-logo-based-on-category/167294/5 "2024-04-17T20:18:51Z")
I think you’d need to put your image on the `` element, else the logo link will just collapse.
```plaintext
// Show another image in the title
body.category-something .d-header .title a {
...
}
```
---
### Author:  [@bangkarlsen](https://meta.discourse.org/u/bangkarlsen)
#### Post date: [April 18, 2024, 10:01am UTC](https://meta.discourse.org/t/show-different-header-logo-based-on-category/167294/6 "2024-04-18T10:01:23Z")
Ah, right, I was mostly focussing on the CSS selectors. Thanks for correcting that.