Custom Header

:warning: No Longer an Active Project

I have come to the difficult decision to stop work on Custom Header and have archived the project. Please, see the farewell post for more info.

Custom Header

Custom Header adds enhancements and customization options to Home Assistant’s Lovelace header.

Docs (installation, config, and issues)

:warning: Important

  • Some config options can remove your ability to access UI elements. Each of these options is marked with a warning in the docs and in the UI editor. Be sure to read the important notes section of the docs or the warning at the top of the UI editor for instructions on how to restore the default header if needed.
  • Each release of Custom Header is designed for the latest versions of Home Assistant. If you are on lower versions of Home Assistant you need to use earlier versions of CH.


  • Per user/device configs
  • Every config item can be templated with Jinja
  • Style and hide any element in the header
  • Dynamically style header elements based on entity states/attributes
  • Buttons can be hidden, made into custom or templated text, or be placed in the options menu
  • Compact mode, kiosk mode, and footer mode
  • Default/starting view
  • But wait, there’s more…


  • It’s preferred if issues and feature requests are posted to GitHub.
  • Be sure to read the issues section of the docs.

Supporting Development

Advanced Template Showcase and Discussion



Works great, thank you very much! :slight_smile:

Especially the footer mode is perfect. Sleeping time just got shorter for tonight! :smiley:


Just loaded through HACS and also loaded the swipe navigation again… All good. Thanks!

1 Like

Searching in HACS for “custom header” it only finds the old project CCH.
How did you find the new plugin?

it’s in hacs here

1 Like

If HACS doesn’t find it automatically, do this:

  1. Copy the address of the github repository of custom header:
  2. Add this address under HACS -> Settings -> Custom repository (choose plugin as category)
  3. Look under Plugins for “Custom Header” and go on like usual.



Well maybe click reload data in HACS settings. It is there after all…

Thanks, I’ve found it :+1:t3:

Very nice, though I am missing a feature that was there in CCH. I haven’t tried it yet, but running through the docs it doesn’t have header: false option anymore. According to the docs I should use kiosk mode. However using kiosk mode will also disable the sidebar.

Btw, really fast release XD, I thought that it would still take weeks to get us something. Thanks @mayker Really cool!

Yeah, this was something I just didn’t think to add to the new one. Someone beat you to the punch though and there is already a feature request.

1 Like

Is anyone else having an issue using the HA ipad ios app? It looks like this for me. Reloading the page doesn’t help. Sometimes does it using a web browser too. Iphone looks mostly ok. In portrait mode there is a little sliver of blue missing on the header on the right side.

** EDIT ** Forget it. I removed the old CCH from resources and it seems to have fixed it.

I’m having issues with the iPad app as well. The header is overlapping like in my photo:

I remember this being some sort of issue that might be the fault of “layout-card” instead of custom header, but in this case it works fine in a browser, just not the ipad app.


Far out @mayker you’re quick with those fixes…:slight_smile: thanks a lot :+1:

Hi, someone else with unregistered webhook messages in the log?

I have deleted my access tokens and browser cache, it seems that it has been fixed

O man, I’m having a lot of difficulties using your website at, I cannot browser any menu items on the left (safari on macbook and iphone), or is it just me ?

How do I enable the plugin in the lovelave config ?
Tried to rename cch: to ch: but that doesn’t work :stuck_out_tongue:


Ah, works in Edge tho

Cant find anywhere in the docs regarding replacing the old CCH with CH, do we just delete CCH and install CH. I will be using HACS. regards

Yes, delete the old cch and install the new ch.
After that replace cch: with custom_header: in your lovelace yaml file

I get a lot of these in the logs, even after restarting HA:

https://tcc.bla.bla/community_plugin/custom-header/custom-header.js:576:42260 TypeError: undefined is not an object (evaluating ‘’)

https://tcc.bla.bla/community_plugin/custom-header/custom-header.js:576:42389 TypeError: undefined is not an object (evaluating ‘’)

And the header gets shorter on my iphone (HOME DEVICES MEDIA TR), it’s not using the full width:

When disabling the plugin (or use disabled_mode:true) it looks much wider: