[solved] Remove/hide Lovelace header? => Custom Header

Configuration Frontend
1

Hi all

Is it possible to remove/hide the header completely, only for a specific dashboard?
Since sceen surface on a smaller/portable device is valuable, it’s interesting if the header could be out of sight.
I have already discovered that if you change the title with a blank space, it becomes smaller.
In my search, I have found the Custom Header project but this seems to be overkill for what I want to achieve.

Thanks a lot in advance
Nick

EDIT 2023/07/14: since this topic + the link I posted get quite some attention and Custom Header is not developed anymore (latest release Sep 30, 2020), I’m adding another way to achieve this.
By using 🔹 Browser_mod - turn your browser into a controllable device, and a media_player (GitHub - thomasloven/hass-browser_mod: 🔹 A Home Assistant integration to turn your browser into a controllable entity and media player) you can hide your header control much more.

2

Not necessarily overkill, and I don’t know any other options…

1 Like
3

It’s you’re only option, and it can do what you’re asking.

1 Like
4

Hi guys, thanks for stepping in!

You are right, it seems to be the only option.
I’m surprised that this is not possible in the basic configuration since I guess that most people use portable devices that have smaller screens then a full-size computer.

On the other hand I wonder if the header is really necessary in a sense of functionality.
For sure the title of the Lovelace UI seems to me a waste of space and the ability to make changes to the UI could be placed somewhere else.

I am a little reluctant to make these kind of changes that seem to be kinda hacks but I tried the Custom Header customization and it’s indeed exactly what I want.

Have a nice day!
Nick

5

Unfortunately, CCH is no longer exist and the git repo has been archived. hopefully HA will add the features to the core soon.

6

Use Custom Header instead of Custom Compact Header. I also made a theme which does the same thing.

7

Looks like Custom Header has been archived as well.

8

Well then use card-mod theming

9

I also have this problem, how did you solve this problem

10

Working on it… :grin:

11

Look at thomasloven/lovelace-card-mod’s wiki on GitHub.

12

I can’t figure out what you are refering to with thomasloven/lovelace-card-mod wiki.

How do I hide the header

13

See this: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook#remove-the-header-fully
Install card-mod with HACS. Ask on this forum for support:
🔹 Card-mod - Super-charge your themes!

14

Hello,
So following your instructions from above i have installed lovelace-card-mod from HACS.

So do I add this code

no-header:
  card-mod-theme: no-header

  card-mod-root: |
    app-header {
      display: none;
    }

to my dashboard, raw configuration editor like

views:
  - badges: null
    cards:
    title: Home
      - cards:

?
Regards,

15

I didn’t mean this forum, I meant the forum over 🔹 Card-mod - Super-charge your themes!
Anyway it’s a theme, put it in your themes directory, Google how to set up themes in Home Assistant.

16

Ever found how to get that to work? I am having lots of trouble figuring out myself

17

Ask over here: 🔹 Card-mod - Super-charge your themes!