Persistent top and bottom button row (menu)

Configuration
1

Hi,
Does anyone know of a tutorial where it is explained how to add a top and bottom navigation bar that is persistent on every page on my dashboard?
Ik have created a dashboard where I have all the rooms in one place. When you go into a room you can go back to all the rooms with a simple button. It would be nicer to have the button stay in place (on scroll) on top. I would also like to add other things that are always there (on top and the bottom).

Thanks for any help.
Aaron

2

Sorry a little late.

If you don’t already have HACS install it.

My solution is using mushroom chips card and then some css like this using card mod:

card_mod:
  style: |
    ha-card {
      position: fixed;
      bottom: 80px;
      left: 0;
      width: 100%;
      padding: 10px;
    }
    ha-card > * > * {
      box-shadow: 0px 0px 20px black;
      border-radius: 100px;
    }

To get this:
image

You can change bottom for top in the example above.

(by the way I’m using material rounded as the theme. it moves the navbar to the bottom)

And if its at the bottom of the screen you can add some buffer like this:

type: custom:mushroom-title-card
title: ''
card_mod:
  style: |
    ha-card {
      padding: 30px !important;
    }
1 Like