Custom Header

The Customer Header works great as a replacement for Compact Custom Header.

Currently I am missing the following two options I was using in Compact Custom Header:

  • Clock in header on the rights (instead of Options button)
  • Swipe functionality

Will these options also be implemented in Custom Header or are there other options?


chevrons: false

Was discussed a few posts up… short answer you need the swipe-navigation card again.


Try using

    options: '{{ hours12 }}:{{ minutesLZ }}'

Nice update @mayker !
Do you plan on adding the swipe feature directly with the new Custom Header module in a near future, or should we only rely on the Swipe Navigation card ?
Thank you anyway !

Custom Header

Can I suggest reading maybe the last 10 posts in this thread and your question will be answered.

1 Like

Hi David,
I read your post but it seemed to be a temporary fix to me.

@tCC Regarding the width of the tabs: This was done to make room for the buttons (options and menu) after scrolling. You’ll notice that those buttons move down after scrolling so that you have access to them no matter where you are on the page. You can use chevrons: false as @neohidra mentioned to hide the scrolling arrows to see more of the tabs if you like.

As far as the TypeError, if you could submit an issue to the GitHub page providing the required info I would be able to check it out further. From your earlier posts it sounds like you replaced cch: in your config with custom_header:, if you also did not change the config it might be causing issues as CCH and Custom Header have very different config options.

1 Like

Any button (as well as the header text) can be a clock, date, both, or anything else really using templates @Shayne_Bergan showed a good example for a clock, but there are many others as well as how to build your own on the docs site under “templates”

@heinoldenhuis & @mat44150
Swipe navigation and Custom Header will remain separate. At some point here in the near future I will be rewriting Swipe Navigation as well.

Yes, could be related to compact_header: false from the old cch: config, removed that and the errors are gone :slight_smile:


Is it possible to have different icons (and navigation paths) per view?

No, but I can look into adding per view config now (using exceptions config) as that’s something that wasn’t possible with CCH and may just be now. That way you could hide/show tabs depending on the view you’re on. Will look into it.


That would be amazing, I have actually made a custom header using CCH (I just hid the header on that). But seeing your new custom_header can do two of the things I had created. I was just wondering if it could be per view.

This is what it currently looks like (still using CCH).

As you can see the first line is what could in theory be achieved with your new custom header. (My first line is the conditional text that shows goodmorning or goodnight etc depending on the time of the day and it has 3 buttons at the left) all which in theory could be possible with your new component.

I also have another question :rofl::joy: (srry). But would it be possible to have half of the header on the top and the other half on the bottom(footer). Basically the footer would be additional instead of a replacement of the top header. Man so many questions haha sorry.

Thanks I will install this tonight!


love that theme and background! could you share the details? thanks

Thanks, this solved my issue.
After your post I saw the button_text option example also in de docs.
Missed this part of the documentation.

Thanks! That clarifies it

Sorry, missed the post before, but thanks for your answer. Will use the Swipe-navigation card.

Thank you for your consistent development. While migrating I had a small issue (human error) since they hide_* options are not consistent for button configs. You have the button configs as: menu_hide, voice_hide, options_hide… I read it and type hide_voice (maybe I’m dyslexic).

Every other option for main, and tab configs to hide items start as hide_help, hide_tabs, hide_config, etc.

I figure maybe you have a reason for flipping them. Maybe templating or something, but just thought I would point out my observation.

Thank you again @mayker

I have uninstalled CCH and installed the new CH using HACS, fixed my ui-lovelace.yaml config, and it’s mostly working, except for two things. I’ve read all the docs and this thread, but I don’t know I’m missing.

First, the time is not following my template - I don’t know why the AM is before the time.


Second, on my Windows desktop in Chrome it looks fine, but in Chrome on my iPad and in the iOS app on my iPhone, the header lays on top of my cards instead of above it.

Here’s what I have:

  - url: /community_plugin/button-card/button-card.js
    type: module
  - url: /community_plugin/custom-header/custom-header.js
    type: module
  - url: /community_plugin/simple-thermostat/simple-thermostat.js
    type: module
  - url: /community_plugin/lovelace-slider-entity-row/slider-entity-row.js
    type: js
  - url: /community_plugin/mini-graph-card/mini-graph-card-bundle.js
    type: module
  - url: /community_plugin/lovelace-card-tools/card-tools.js
    type: js
  - url: /community_plugin/lovelace-theme-maker/theme-maker.js
    type: js
  - url: /community_plugin/mini-media-player/mini-media-player.js
    type: module
  - url: /community_plugin/lovelace-card-mod/card-mod.js
    type: module
  - url: /local/lovelace/dark-sky-weather-card.js
    type: module
  - url: /local/lovelace/toggle-lock-entity-row.js
    type: js

#  header_text: 'Home'
  compact_mode: true
  background: 'rgba(21,56,66, 0.2)'
    voice: '{{ date }} <br> {{ hours12 }}:{{ minutesLZ }} {{ AMPM }}'

        - font-size: 14px
        - font-size: 14px

  - !include lovelace_views/00_home_view.yaml
  - !include lovelace_views/10_lights_view.yaml
  - !include lovelace_views/20_sensor_graphs_view.yaml

(…etc…didn’t include all my !includes for views). I’ve cleared cache, with both Ctrl-F5 and using Chrome dev console to empty cache and hard reload. I’ve restarted HA. Doesn’t make any difference. Thanks for any help!

1 Like