Home Assistant Community

Compact Custom Header


@VDRainer Could you share your config for the card?

@gekim.84 What browser are you using?


yes the compact header works, i just get this pop-up every time i load/ refresh at the bottom left corner saying


I’m using Chrome (latest version)

- type: custom:compact-custom-header
  menu: overflow
  background_image: true
    - conditions:
        user_agent: Mobile
        options: hide
        hide_tabs: 13,14,15,16,17
    - conditions:
        user: TPad
        menu: hide
        options: hide
        hide_tabs: 0,1,2,3,4,5,6,7,8,9,10,11,12

That pop-up is telling you that an error was written to the log. Click the info icon (far right) under developer tools in your sidebar to see what the error is. Or is it just the export error? Sorry if I’m telling you something you already know.



Does removing background_image: true “fix” the issue?


Unfortunately no,


yes its just the export error, the compact header works tho.

here’s that full log error again (my url removed):

https://[myurl]/local/custom-lovelace/compact-custom-header-editor.js?v=1.0.1b2:35:1 Uncaught SyntaxError: Unexpected token export

Service system_log/write called.


Okay, think I’ve been able to reproduce this. Check your browser dev-tools errors (F12), I imagine you’re getting something like TypeError: Cannot read property 'querySelector' of null around line 355.

This will require an update, but I’m on it.


This is what i see, for whatever that means :blush:


The menu button elements changed a bit in HA 0.89.0b0. This is fixed in the latest version 1.0.1b3.

1 Like

hi, I’ve updated to your latest 1.0.1b3 and I still get the error:


The latest update only addressed the HA 0.890b0 issues. Please, share your resources section and config for this card. Are you using YAML or storage mode? Have you restarted after adding javascript_version: latest? Have you cleared your cache?


ahhh I see,

I’m on Synology Docker
HA 0.88.1
using yaml
I’ve homeassistant.restart everytime
I’m using latest chrome browser, clear cache as well

this is my resources:

- url: /local/custom-lovelace/compact-custom-header.js?v=1.0.1b3
    type: module
- url: /local/custom-lovelace/compact-custom-header-editor.js?v=1.0.1b3
    type: js
  - title: Main Dashboard
    icon: mdi:home
    panel: true
    - type: custom:layout-card
      layout: vertical
        - type: custom:compact-custom-header #Custom Compact Header
          main_config: true
          menu: show
          options: clock
          voice: hide
          notifications: hide
          clock_format: 12 
        - type: custom:layout-card

Remove the editor portion from your resources completely. Editors do not need added there, just the cards. Remove these 2 lines:

- url: /local/custom-lovelace/compact-custom-header-editor.js?v=1.0.1b3
    type: js

I see, thank you, beginner here and I didn’t know about that.
removed and fixed


Love the clean look of this, but I’ve set notifications as overflow and the badge doesn’t display correct


That might be an issue with your theme?


I suspected this, but it looks like this even with the default theme


Looks like I just need to adjust the styling of the indicator when it’s in there. Will fix soon.


Great. Thanks!
Look forward to it!
Do you need a big reported in git hub?