The top navigation between views on a dashboard is hard to reach on mobile. Can it be moved to bottom of screen when on small viewport?
for info this is what it look like with the navigation bar at the bottom :
it’s been done with an old add on unsupported anymore ! I would really like to have it by default in home assistant
Worth noting that drains lovelace dashboard on HACS moves tabs to the bottom on his dashboard and it’s absolute bliss
no clue why there is no other way then card-mod to change stuff on the navbar by now.
i guess alot of users would like to have the navbar at the bottom on mobile devices.
1 Like
Custom header stoped workin on 2023.4 … 
would love to see something like custom header working again
OK: So i find out that you suposed to be able to do it with card-mod
compact-header:
card-mod-theme: compact-header
header-height: 48px
card-mod-root-yaml: |
paper-tabs$: |
}
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
But I have a noob issue… i don’t know where to put that code …
EDIT: It’s suposed to be in the theme !!!
So this is my theme :
Black Grayer Glass:
card-mod-theme: compact-header
header-height: 48px
card-mod-root-yaml: |
paper-tabs$: |
}
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
# Change the value below 8px to 0px to remove the rounded corners
ha-card-border-radius: 8px
etc.......
But it still won’t work…
ye that´s a know workaround. but afaik this also got broken since the latest update.
also Lovelace: Navbar Position - move the navigation bar to the bottom of the screen is broken since the update.
Minimalist fixed the code in their minimalist-ios-tapbar theme. so it seems like need to check their code.
I asked on their github how they are doing it but they closed my request
Anyone found a good work around to this? It’s ridiculous that it isn’t baked in HA already.
I found a “ok” work around… I create a custom stack-in-card horizontal with button that link to page i want. then i add this code at the bottom of the card
card_mod:
style: |
:host {
position: sticky !important;
bottom: 0;
margin-bottom: 10px !important;
}
ha-card {
background-color: var(--primary-color);
border-radius: 0;
margin: 0 -1%;
width: 102%;
max-width: 110%;
}
Finally i disable the header with a kisok mode
1 Like
If you don’t mind could you share your card code please? thanks
type: custom:stack-in-card
show_title: false
mode: horizontal
cards:
- type: custom:button-card
styles:
card:
- border: solid 1px var(--primary-color)
icon:
- margin-bottom: 20px
icon: mdi:remote-tv
size: 65%
color: white
tap_action:
action: navigate
navigation_path: /lovelace-mobile/remotechoice
- type: custom:button-card
styles:
card:
- border: solid 1px var(--primary-color)
icon:
- margin-bottom: 20px
icon: mdi:home-thermometer-outline
size: 65%
color: white
tap_action:
action: navigate
navigation_path: /lovelace-mobile/clim
- type: custom:button-card
styles:
card:
- border: solid 1px var(--primary-color)
icon:
- margin-bottom: 20px
icon: mdi:webcam
color: white
size: 65%
tap_action:
action: navigate
navigation_path: /lovelace-mobile/camera
- type: custom:button-card
styles:
card:
- border: solid 1px var(--primary-color)
- '--keep-background': 'true'
- background-color: white
icon:
- margin-bottom: 20px
icon: mdi:home-outline
size: 65%
color: var(--primary-color)
tap_action:
action: navigate
navigation_path: /lovelace-mobile/home
- type: custom:button-card
styles:
card:
- border: solid 1px var(--primary-color)
icon:
- margin-bottom: 20px
icon: mdi:information-outline
color: white
size: 65%
tap_action:
action: navigate
navigation_path: /lovelace-mobile/info
- type: custom:button-card
styles:
card:
- border: solid 1px var(--primary-color)
icon:
- margin-bottom: 20px
icon: mdi:washing-machine
color: white
size: 65%
tap_action:
action: navigate
navigation_path: /lovelace-mobile/lavage
- type: custom:button-card
styles:
card:
- border: solid 1px var(--primary-color)
icon:
- margin-bottom: 20px
icon: mdi:robot-vacuum
color: white
size: 65%
tap_action:
action: navigate
navigation_path: /lovelace-mobile/vacuum
card_mod:
style: |
:host {
position: sticky !important;
bottom: 0;
margin-bottom: 10px !important;
}
ha-card {
background-color: var(--primary-color);
border-radius: 0;
margin: 0 -1%;
width: 102%;
max-width: 110%;
}