Compact Custom Header
Customize the Home Assistant header and much more!
See the Docs for installation and configuration.
Follow the troubleshooting guide before submitting issues here or on the forums.
Features:
- Compact design that removes header text.
- Per user/device settings.
- Hide tabs/buttons from user's and devices.
- Style & hide anything in the header & the header itself.
- Dynamically style header elements based on entity states/attributes.
- Add swipe navigation to Lovelace for mobile devices.
- Any button can be hidden, turned into clock with optional date, or placed in the options menu.
- Set a default/starting view.
Before:
After:
Conditional Styling Demo:
Important Notes
- Hiding the header or the options button will remove your ability to edit from the UI.
- You can disable CCH by adding "?disable_cch" to the end of your URL.
- After using the raw config editor you will need to refresh the page to restore CCH.
- While in edit mode select "Show All Tabs" in the options menu to display hidden tabs.
This card requires type: module. More info in the installation instructions
resources:
- url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
type: module