man i dont know. I took it out on both pages and have exactly like you. it just wont load the side without a damn refresh…
custom_header:
kiosk_mode: true
sidebar:
clock: false
digitalClock: true
sidebarMenu:
- action: navigate
name: Home
navigation_path: /lovelace/arbos-h
ome
Strange, its really ignoring the kiosk mode.
Maybe it has something to do with caching? Did you try to reboot your host?
Try create a new lovelace dashboard with only the basic info of the custom header and custom sidebar?
I use Lovelace in strorage mode.
try reinstalling the custom header via HACS?
good idea Ill try that. I use to use yaml mode but since this now im stuck in doing it in the gui…i use the raqw config but stull sucks…can you share your config for that? Id much rather have yaml mode back. Well I wanted that storage mode so first one is gui configured…but I havent got around to figuring that out…tbis side bar killin me lol.
I just seen this…yours works tho…
I’ll share my config later today, not home atm.
Well, I have three dashboards. One for my pc with The compact header, works. One for my phone in kiosk mode, also works, and one for the Nest Hubs in my living room and bedroom with kiosk mode enabled, and that also works without any issue… I’ll get back to you later today;)
Appreciate it.
So this is the most important part of the raw config of the lovelace interface i use for the Nest Hub:
custom_header:
kiosk_mode: true
sidebar:
digitalClock: true
digitalClockWithSeconds: true
sidebarMenu:
- action: navigate
active: true
name: Home
navigation_path: /hub-panel/home
- action: navigate
active: true
name: Lights
navigation_path: /hub-panel/lights
- action: navigate
name: Media
navigation_path: /hub-panel/media
- action: navigate
name: Alarm
navigation_path: /hub-panel/alarmpanel
- action: navigate
name: Camera
navigation_path: /hub-panel/security
- action: navigate
name: Navigate
navigation_path: /hub-panel/navigate
style: |
:host {
--sidebar-background: 'rgba 50, 50, 50, .5';
--sidebar-text-color: #B9B9B9;
--face-color: 'rgba 50, 50, 50, .5';
--face-border-color: 'rgb 84, 84, 84';
--clock-hands-color: #000;
--clock-seconds-hand-color: #216491;
--clock-middle-background: 'rgb 4, 84, 84';
--clock-middle-border: #000;
--border-radius: 5px;
}
template: >
{% if "gft" in states('sensor.trash_today') %} <li>Vandaag GFT</li> {% endif
%}
{% if "papier" in states('sensor.trash_today') %} <li>Vandaag papier</li> {%
endif %}
{% if "plastic verpakkingsafval" in states('sensor.trash_today') %}
<li>Vandaag plastic</li> {% endif %}
{% if "restafval" in states('sensor.trash_today') %} <li>Vandaag
restafval</li> {% endif %}
{% if "gft" in states('sensor.trash_tomorrow') %} <li>Morgen GFT</li> {%
endif %}
{% if "papier" in states('sensor.trash_tomorrow') %} <li>Morgen papier</li>
{% endif %}
{% if "plastic verpakkingsafval" in states('sensor.trash_tomorrow') %}
<li>Morgen plastic</li> {% endif %}
{% if "restafval" in states('sensor.trash_tomorrow') %} <li>Morgen
restafval</li> {% endif %}
{% if states('sensor.current_lights_on_living_room') | float > 1 %}
<li>Beneden {{states('sensor.current_lights_on_living_room')}} lampen
aan</li> {% endif %}
{% if "1" in states('sensor.current_lights_on_living_room') %} <li>Beneden 1
lamp aan</li> {% endif %}
{% if states('sensor.current_lights_first_floor_on') | float > 1 %}
<li>Boven {{states('sensor.current_lights_first_floor_on')}} lampen aan</li>
{% endif %}
{% if "1" in states('sensor.current_lights_first_floor_on') %} <li>Boven 1
lamp aan</li> {% endif %}
{% if states('sensor.current_lights_second_floor_on') | float > 1 %}
<li>Zolder {{states('sensor.current_lights_second_floor_on')}} lampen
aan</li> {% endif %}
{% if "1" in states('sensor.current_lights_second_floor_on') %} <li>Zolder 1
lamp aan</li> {% endif %}
{% if "1" in states('sensor.current_windows_open') %} <li>Boven 1 raam
open</li> {% endif %}
{% if states('sensor.current_windows_open') | float > 1 %} <li>Boven
{{states('sensor.current_windows_open')}} ramen open</li> {% endif %}
{% if "playing" in states('media_player.sonos_woonkamer') %} <li>Sonos
Woonkamer actief</li> {% endif %}
{% if "playing" in states('media_player.sonos_kantoor') %} <li>Sonos Kantoor
actief</li> {% endif %}
{% if "playing" in states('media_player.sonos_badkamer') %} <li>Sonos
Badkamer actief</li> {% endif %}
{% if "armed_home" in states('alarm_control_panel.ha_alarm') %} <li>Alarm
thuis actief</li> {% endif %}
{% if "armed_away" in states('alarm_control_panel.ha_alarm') %} <li>Alarm
afwezig actief</li> {% endif %}
{% if "disarmed" in states('alarm_control_panel.ha_alarm') %} <li>Alarm
inactief</li> {% endif %}
{% if "pending" in states('alarm_control_panel.ha_alarm') %} <li>Alarm
bezig...</li> {% endif %}
{% if "on" in states('binary_sensor.updater') %} <li>Core update
beschikbaar!</li> {% endif %}
{% if "1" in states('sensor.hacs') %} <li>Er is 1 HACS Update
Beschikbaar</li> {% endif %}
{% if states('sensor.hacs') | float > 1 %} <li>Er Zijn
{{states('sensor.hacs')}} HACS Updates Beschikbaar</li> {% endif %}
{% if "on" in states('binary_sensor.door_sensor_front_door') %} <li>Voordeur
Geopend</li> {% endif %}
{% if "on" in states('binary_sensor.door_sensor_back_door') %}
<li>Achterdeur Geopend</li> {% endif %}
title: Nest Hub Panel Interface
views:
- badges: []
cards:
- entities:
- height: 80
size: 20
type: 'custom:gap-card'
type: 'custom:layout-card'
- cards:
- cards:
- color_type: icon
entity: input_boolean.lights_livingroom
icon: 'mdi:home-assistant'
show_name: false
tap_action:
action: toggle
template: living_room_navigate
type: 'custom:button-card'
- color_type: icon
entity: input_boolean.lights_dining
icon: 'mdi:silverware'
show_name: false
tap_action:
action: toggle
template: living_room_navigate
type: 'custom:button-card'
- color_type: icon
entity: input_boolean.lights_movietime
icon: 'mdi:movie-roll'
show_name: false
tap_action:
action: toggle
template: movie
type: 'custom:button-card'
type: horizontal-stack
- entities:
- height: 20
size: 20
type: 'custom:gap-card'
type: 'custom:layout-card'
- current: true
details: false
entity: weather.buienradar
forecast: true
type: 'custom:weather-card'
mode: vertical
style: |
ha-card {
font-variant: small-caps;
background-repeat: no-repeat;
background-color: rgba(50,50,50,0.3);
background-size: 100% 68px;
}
.card-header {
font-size: 20px;
}
type: 'custom:stack-in-card'
icon: 'mdi:home-assistant'
panel: false
path: home
theme: default
title: cast_overview
Is that what you mean by sharing my config? Or are you interested in another config?
Under Resources (Configuration–>Lovelace Dashboards–>Resources) is the custom header correctly declared as a JavaScript Module? Do you also use the new path for HACS? /hacsfiles/ ?
Thanks. I verified the resource is correct. I meant in your configuration.yaml. You mentioned you use storage mode. I never used the GUI config until 107 and want yaml back.
I also upgraded custom header. I see a lot of guys on that thread have issues and some say the new beta fixed it but not for me
btw love the templates:)
here is mine in case…
Ive been testing with kiosk mode and just disable sidebar. Ive tried different browsers as well/…and of coarse I hold shift to clear cache when doing this.
custom_header:
disable_sidebar: true
header_text: >-
<style> #flipper {color:#999;} #flip {height:24px;overflow:hidden;} #flip >
div > div {color:#fff;height:24px;margin-bottom:24px;display:inline-block;}
#flip div:first-child {animation: show 10s linear infinite;} @keyframes show
{ 0% {margin-top:-144px;} 5% {margin-top:-96px;} 33% {margin-top:-96px;} 38%
{margin-top:-48px;} 66% {margin-top:-48px;} 76% {margin-top:0px;} 100%
{margin-top:0px;}} #flipper p {position:fixed;color:#999; } </style> <div
id=flipper><div id=flip><div><div> Currently -
{{states('sensor.dark_sky_temperature')}}F
{{states('sensor.dark_sky_hourly_summary')}}</div></div><div><div>
Chronovirus Numbers US - {{states('sensor.us_coronavirus_confirmed')}}
People and {{states('sensor.us_coronavirus_deaths')}}
Deaths</div></div><div><div> {{states('sensor.doors_open')}} Doors Open and
{{states('sensor.windows_open')}} Windows Open</div></div><div><div>
{{states('sensor.lights_on')}} Lights On</div></div><div><div> <style>
voice_hide: true
In configuration.yaml I have nothing going on for Lovelace. Did you also try without the header text? Mine was also ignoring the complete custom header with additional header config… After that I am a little bit out of options tbh… I have no clue what stops the custom header from loading. What do you see when you use the element inspector (f12) of your browser when you load for the first time?
yea Ive been testing without it. I dont understand, this is killing me.
Just wanted to let you know I figured it out. I was using differnent dashboards, when I add tabs the “old” way prior to 107 it works.
Thanks for all the help
Glad you figured it out! What do you mean by adding tabs the “old” way?
Sadly not. Happy for a solution 
Since moving to 0.107.7. The selected tab is no longer ‘highlighted’ any ideas?
Been messing with it on and off all day but this is what I have -
style: |
:host {
--sidebar-background: 'rgba 50, 50, 50, .5';
--sidebar-text-color: #ffffff;
--border-radius: 5px;
}
.sidebarMenu li.active {
background-color: #000000!important;
}
TIA
Hi man,
Did not know you could do that with custom header XD
Thanks for sharing.
I would like to add your additions if you can make the PR i will add it!