Sticky Floating Navigation Menu - All Devices - Mushroom Chips Card

[Chykan (Andrew)]

Complete Sticky Floating Navigation Menu - All Devices - Mushroom Chips Card

• White Border
• Simple Shadow
• Place it at the bottom of every dashboard that it links to
• The card will leave a space if it is placed in the middle of a dashboard.
• The below has the conditional features shown in the pictures, these can be customised per page.
  
  

          - type: custom:mushroom-chips-card
            chips:
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.kiosk_mode_toggle
                    state: 'on'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: input_boolean.kiosk_mode_toggle
                  icon: mdi:menu
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,194,226,1) 100%);
                      }
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(min-height: 801px) and (min-width: 768px)'
                  - condition: state
                    entity: input_boolean.kiosk_mode_toggle
                    state: 'on'
                chip:
                  type: back
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,194,226,1) 100%);
                      }
              - type: spacer
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.kiosk_mode_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: input_boolean.kiosk_mode_toggle
                  icon: mdi:monitor-screenshot
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,194,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  hold_action:
                    action: toggle
                  entity: input_boolean.comfort_toggle
                  icon: mdi:thermostat-cog
                  card_mod:
                    style: |
                      ha-card {
                        border: 2.0px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(216,226,43,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.kiosk_mode_toggle
                    state: 'on'
                  - condition: state
                    entity: switch.home_and_away_switch
                    state: 'on'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: switch.home_and_away_switch
                  icon: mdi:home-outline
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,226,49,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: switch.home_and_away_switch
                    state: 'off'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: switch.home_and_away_switch
                  icon: mdi:home-export-outline
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(226,43,43,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.fire_toggle
                    state: 'on'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  hold_action:
                    action: toggle
                  entity: input_boolean.fire_toggle
                  icon: mdi:weather-cloudy-clock
                  card_mod:
                    style: |
                      ha-card {
                        border: 2.0px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(45,253,233,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.fire_toggle
                    state: 'off'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  hold_action:
                    action: toggle
                  entity: input_boolean.fire_toggle
                  icon: mdi:fire-alert
                  card_mod:
                    style: |
                      ha-card {
                        border: 2.0px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(103,0,0,1) 0%, rgba(255,207,59,1) 100%);
                      }
              - type: spacer
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-custom/weather-all-devices
                  icon: mdi:weather-rainy
                  entity: null
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-custom/weather-all-devices
                  icon: mdi:weather-lightning
                  entity: null
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: script.weather_page
                  icon: mdi:weather-lightning-rainy
                  card_mod:
                    style: |
                      ha-card {
                        border: 1.0px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  entity: null
                  tap_action:
                    action: navigate
                    navigation_path: /fish-tank-panel/panel
                  icon: mdi:fishbowl-outline
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  entity: null
                  tap_action:
                    action: navigate
                    navigation_path: /fish-tank-panel/mobile
                  icon: mdi:fishbowl-outline
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: script.fish_tank_panel
                  icon: mdi:fishbowl-outline
                  card_mod:
                    style: |
                      ha-card {
                        border: 1.0px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-floorplan/CCTV-Aarlo-Panel
                  entity: null
                  icon_color: white
                  icon: mdi:cctv
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-floorplan/CCTV-Aarlo-Mobile
                  entity: null
                  icon_color: white
                  icon: mdi:cctv
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: script.cctv_google_home
                  icon: mdi:cctv
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-media/all_devices
                  entity: null
                  picture: ''
                  icon_color: white
                  icon: mdi:remote-tv
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-media/all_devices
                  entity: null
                  picture: ''
                  icon_color: white
                  icon: mdi:remote-tv
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  icon: mdi:remote-tv
                  entity: script.media_page
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /dashboard-bathroom/panel
                  entity: null
                  icon: mdi:bathtub-outline
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /dashboard-bathroom/mobile
                  entity: null
                  icon: mdi:bathtub-outline
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  icon: mdi:bathtub-outline
                  entity: script.bathroom_home
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: input_boolean.chips_menu_toggle
                  icon: mdi:unfold-less-vertical
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,226,64,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: input_boolean.chips_menu_toggle
                  icon: mdi:unfold-more-vertical
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid white !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,225,226,1) 100%);
                      }
            card_mod:
              style: |
                @media (orientation: portrait) and (max-width: 768px)  {
                  ha-card {
                    z-index:1;
                    position: fixed;
                    bottom: 5px;
                    left: 5px;
                    width: calc(100% - 10px);
                    background-color: transparent !important;
                    border-radius: 100px;
                    padding: 10px;
                    --chip-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.8) !important;
                 }
                 }
                 @media (orientation: portrait) and (min-width: 769px)  {
                   ha-card {
                     z-index:1;
                     position: fixed;
                     bottom: 10px;
                     left: 50px;
                     width: calc(100% - 100px);
                     background-color: transparent !important;
                     border-radius: 100px;
                     padding: 10px;
                     --chip-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.8) !important;
                     --chip-height: 60px;
                     --chip-border-radius: 50%;
                     --chip-icon-size: 30px;
                   }
                   }
                   @media (orientation: landscape) and (min-width: 1281px)  {
                     ha-card {
                       z-index:1;
                       position: fixed;
                       bottom: 5px;
                       left: 100px;
                       width: calc(100% - 200px);
                       background-color: transparent !important;
                       border-radius: 100px;
                       padding: 10px;
                       --chip-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.8) !important;
                       --chip-height: 55px;
                       --chip-border-radius: 50%;
                       --chip-icon-size: 30px;
                     }
                     }
                     @media (orientation: landscape) and (min-height: 600px) and (max-height: 800px) and
                     (max-width: 1280px)  {
                       ha-card {
                         z-index: 1;
                         position: fixed;
                         bottom: 5px;
                         left: 50px;
                         width: calc(100% - 100px);
                         background-color: transparent !important;
                         border-radius: 100px;
                         padding: 10px;
                         --chip-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.8) !important;
                         --chip-height: 55px;
                         --chip-border-radius: 50%;
                         --chip-icon-size: 30px;
                       }
                       }

[Chykan (Andrew)]

UPDATED FOR PIXEL TABLET HUB
More refined styling.

• Gray Border
• Improved Shadow
  
  

          - type: custom:mushroom-chips-card
            chips:
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.kiosk_mode_toggle
                    state: 'on'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: input_boolean.kiosk_mode_toggle
                  icon: mdi:menu
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,194,226,1) 100%);
                      }
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(min-height: 801px) and (min-width: 768px)'
                  - condition: state
                    entity: input_boolean.kiosk_mode_toggle
                    state: 'on'
                chip:
                  type: back
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,194,226,1) 100%);
                      }
              - type: spacer
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.kiosk_mode_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: input_boolean.kiosk_mode_toggle
                  icon: mdi:monitor-screenshot
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,194,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.kiosk_mode_toggle
                    state: 'on'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: input_boolean.comfort_toggle
                  icon: mdi:thermostat-cog
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(216,226,43,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.kiosk_mode_toggle
                    state: 'on'
                  - condition: state
                    entity: switch.home_and_away_switch
                    state: 'on'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: switch.home_and_away_switch
                  icon: mdi:home-outline
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,226,49,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: switch.home_and_away_switch
                    state: 'off'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: switch.home_and_away_switch
                  icon: mdi:home-export-outline
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(226,43,43,1) 100%);
                      }
              - type: spacer
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-custom/weather-all-devices
                  icon: mdi:weather-rainy
                  entity: null
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-custom/weather-all-devices
                  icon: mdi:weather-lightning
                  entity: null
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: script.weather_page
                  hold_action:
                    action: navigate
                    navigation_path: /lovelace-custom/weather-all-devices
                  icon: mdi:weather-lightning-rainy
                  card_mod:
                    style: |
                      ha-card {
                        border: 1.0px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  entity: null
                  tap_action:
                    action: navigate
                    navigation_path: /fish-tank-panel/panel
                  icon: mdi:fishbowl-outline
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  entity: null
                  tap_action:
                    action: navigate
                    navigation_path: /fish-tank-panel/mobile
                  icon: mdi:fishbowl-outline
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: script.fish_tank_panel
                  hold_action:
                    action: navigate
                    navigation_path: /fish-tank-panel/panel
                  icon: mdi:fishbowl-outline
                  card_mod:
                    style: |
                      ha-card {
                        border: 1.0px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-floorplan/CCTV-Aarlo-Panel
                  entity: null
                  icon_color: white
                  icon: mdi:cctv
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-floorplan/CCTV-Aarlo-Mobile
                  entity: null
                  icon_color: white
                  icon: mdi:cctv
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: script.cctv_google_home
                  hold_action:
                    action: navigate
                    navigation_path: /lovelace-floorplan/CCTV-Aarlo-Panel
                  icon: mdi:cctv
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-media/all_devices
                  entity: null
                  picture: ''
                  icon_color: white
                  icon: mdi:remote-tv
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-media/all_devices
                  entity: null
                  picture: ''
                  icon_color: white
                  icon: mdi:remote-tv
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  icon: mdi:remote-tv
                  entity: script.media_page
                  hold_action:
                    action: navigate
                    navigation_path: /lovelace-media/all_devices
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /dashboard-bathroom/panel
                  entity: null
                  icon: mdi:bathtub-outline
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /dashboard-bathroom/mobile
                  entity: null
                  icon: mdi:bathtub-outline
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  icon: mdi:bathtub-outline
                  entity: script.bathroom_home
                  hold_action:
                    action: navigate
                    navigation_path: /dashboard-bathroom/panel
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: input_boolean.chips_menu_toggle
                  icon: mdi:unfold-less-vertical
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,226,64,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: input_boolean.chips_menu_toggle
                  icon: mdi:unfold-more-vertical
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,225,226,1) 100%);
                      }
            card_mod:
              style: |
                @media (orientation: portrait) and (max-width: 768px)  {
                  ha-card {
                    z-index:1;
                    position: fixed;
                    bottom: 5px;
                    left: 5px;
                    width: calc(100% - 10px);
                    background-color: transparent !important;
                    border-radius: 100px;
                    padding: 10px;
                    --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px!important;
                 }
                 }
                 @media (orientation: portrait) and (min-width: 769px)  {
                   ha-card {
                     z-index:1;
                     position: fixed;
                     bottom: 10px;
                     left: 50px;
                     width: calc(100% - 100px);
                     background-color: transparent !important;
                     border-radius: 100px;
                     padding: 10px;
                     --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
                     --chip-height: 60px;
                     --chip-border-radius: 50%;
                     --chip-icon-size: 30px;
                   }
                   }
                   @media (orientation: landscape) and (min-width: 1281px)  {
                     ha-card {
                       z-index:1;
                       position: fixed;
                       bottom: 5px;
                       left: 100px;
                       width: calc(100% - 200px);
                       background-color: transparent !important;
                       border-radius: 100px;
                       padding: 10px;
                       --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
                       --chip-height: 55px;
                       --chip-border-radius: 50%;
                       --chip-icon-size: 30px;
                     }
                     }
                     @media (orientation: landscape) and (min-height: 600px) and (max-height: 800px) and
                     (max-width: 1280px)  {
                       ha-card {
                         z-index: 1;
                         position: fixed;
                         bottom: 5px;
                         left: 50px;
                         width: calc(100% - 100px);
                         background-color: transparent !important;
                         border-radius: 100px;
                         padding: 10px;
                         --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
                         --chip-height: 55px;
                         --chip-border-radius: 50%;
                         --chip-icon-size: 30px;
                       }
                       }

[Chykan (Andrew)]

Code above updated including Google Tablet Hub.

[loocd]

Hi @Chykan, awesome cards and thank you for the extensive documentation!

I have a similar setup to yours and have just noticed that on the more info dialogue, depending on how much information there is, the bottom nav bar covers the dialogue:

There is an effect selector hidden below the nav bar that I have no way of accessing.

Have you been able to solve this?

[Chykan (Andrew)]

I am pleased you found the documentation adequate.

For dashboards I add blank card like a “title card” at the bottom of the page so that the page can over scroll. This makes room for the floating menu.

As for the more dialogue you may need to use card mod to shrink the dialogue page a bit or use a custom pop-up card that you can customise the size?

Another work around could be to make a “Toggle Helper” that switches the whole menu off completely with a conditional card (You would have to place the whole menu into a conditional card for this to work.) You could then have a single button that appears higher up on your screen when the main menu is off. This single button would then turn the main menu back on.

[loocd]

@Chykan

For dashboards I add blank card like a “title card” at the bottom of the page so that the page can over scroll. This makes room for the floating menu.

That’s exactly how I’ve solved this for dashboards as well

Regarding the more-info dialogues:
I’ve tinkered around a bit and landed on a solution to increase the z-index of the dialogue rather than resizing it (this also works more consistently on mobile as well as desktop).

here’s my code for card-mod themes in case anyone is interested:

  card-mod-more-info-yaml: |
    .: |
      :host {
        position: relative;
        z-index: 11;
      }

[Chykan (Andrew)]

Excellent work

[loocd]

just noticed that this isn’t even necessary!
I had my navbar set to z-index: 10;

After looking at the developer tools in more detail I’ve noticed that the home assistant dialogues are set to z-index: 8;

Changing my navbar’s z-index to 7 fixes the issue just as well and doesn’t require card-mod themes.

[davidnestico]

This navbar looks awesome, code pls?

[Chykan (Andrew)]

The code is all the the above tutorial. Step-by-Step. Complete code here. Sticky Floating Navigation Menu - All Devices - Mushroom Chips Card - #3 by Chykan

[loocd]

I used decluttering card for my navbar so that I can easily put it on every page.

Decluttering Templates

general_nav-bar:
    default:
      - Icon 1: mdi:lightbulb-outline
      - Icon 1 Color: rgba(var(--primary-background-color-rgb),0.6)
      - Icon 1 Path: illumination
      - Icon 2: mdi:roller-shade
      - Icon 2 Color: rgba(var(--primary-background-color-rgb),0.6)
      - Icon 2 Path: cover
      - Icon 3: mdi:home-thermometer-outline
      - Icon 3 Color: rgba(var(--primary-background-color-rgb),0.6)
      - Icon 3 Path: building
      - Icon 4: mdi:home
      - Icon 4 Color: rgba(var(--default-blue), 0.8)
      - Icon 4 Path: home
      - Icon 5: mdi:shield-check-outline
      - Icon 5 Color: rgba(var(--primary-background-color-rgb),0.6)
      - Icon 5 Path: protect
      - Icon 6: mdi:list-box-outline
      - Icon 6 Color: rgba(var(--primary-background-color-rgb),0.6)
      - Icon 6 Path: rooms
      - Icon 7: mdi:cog-outline
      - Icon 7 Color: rgba(var(--primary-background-color-rgb),0.6)
      - Icon 7 Path: settings
    card:
      type: custom:mod-card
      card_mod:
        style: |
          ha-card {
            --nav-margin: 16px;
            --bar-width: calc( var(--mdc-top-app-bar-width, 100%) - var(--nav-margin));
            --bar-width-max: calc(var(--dashboard-max-width) - 100px - var(--nav-margin));
            --bar-width-actual: min(var(--bar-width), var(--bar-width-max));

            position:fixed;
            width: var(--bar-width-actual);
            bottom: 15px;
            right: 0;
            margin-right: calc( (var(--mdc-top-app-bar-width, 100%) - var(--bar-width-actual)) / 2 );
            z-index: 7; #set to 7 because ha-dialogues are at z-index 8.
          }
      card:
        type: custom:mod-card
        card_mod:
          style:
            hui-grid-card$: |
              #root {
                grid-template-columns: repeat(var(--grid-card-column-count, 3), auto) !important;
                grid-row-gap: 0 !important;
                place-items: center;
              }
            .: |
              ha-card {
                width: 100%;
                border-radius: var(--border-radius-large);
                background-color: rgb(var(--default-blue));
                box-shadow: 0px 0px 5px 0px black;
                padding: 0 15px;
                --grid-card-gap: 1px;
              }
        card:
          type: grid
          square: false
          columns: 7
          cards:
            - type: custom:decluttering-card
              template: general_nav-bar-item
              variables:
                - Icon: '[[Icon 1]]'
                - Icon Color: '[[Icon 1 Color]]'
                - Path: '[[Icon 1 Path]]'
            - type: custom:decluttering-card
              template: general_nav-bar-item
              variables:
                - Icon: '[[Icon 2]]'
                - Icon Color: '[[Icon 2 Color]]'
                - Path: '[[Icon 2 Path]]'
            - type: custom:decluttering-card
              template: general_nav-bar-item
              variables:
                - Icon: '[[Icon 3]]'
                - Icon Color: '[[Icon 3 Color]]'
                - Path: '[[Icon 3 Path]]'
            - type: custom:decluttering-card
              template: general_nav-bar-item
              variables:
                - Icon: '[[Icon 4]]'
                - Icon Color: '[[Icon 4 Color]]'
                - Path: '[[Icon 4 Path]]'
                - Icon Size: var(--navbar-icon-size-lg)
                - Button Size: var(--navbar-button-size-lg)
                - Button Color: rgb(var(--primary-background-color-rgb))
                - Margin: 3px
            - type: custom:decluttering-card
              template: general_nav-bar-item
              variables:
                - Icon: '[[Icon 5]]'
                - Icon Color: '[[Icon 5 Color]]'
                - Path: '[[Icon 5 Path]]'
            - type: custom:decluttering-card
              template: general_nav-bar-item
              variables:
                - Icon: '[[Icon 6]]'
                - Icon Color: '[[Icon 6 Color]]'
                - Path: '[[Icon 6 Path]]'
            - type: custom:decluttering-card
              template: general_nav-bar-item
              variables:
                - Icon: '[[Icon 7]]'
                - Icon Color: '[[Icon 7 Color]]'
                - Path: '[[Icon 7 Path]]'
  general_nav-bar-item:
    default:
      - Icon: mdi:star
      - Icon Size: var(--navbar-icon-size)
      - Button Size: var(--navbar-button-size)
      - Icon Color: rgba(var(--primary-background-color-rgb),0.6)
      - Button Color: unset
      - Path: home
      - Border Radius: var(--border-radius-large)
      - Margin: 0px;
    card:
      type: button
      show_name: false
      show_icon: true
      show_state: false
      entity: ''
      icon: '[[Icon]]'
      icon_height: '[[Icon Size]]'
      tap_action:
        action: navigate
        navigation_path: '[[Path]]'
      hold_action:
        action: none
      card_mod:
        style: |
          ha-card {
            --state-color: [[Icon Color]] !important;
            background-color: [[Button Color]];
            border-radius: [[Border Radius]];
            transition: none;
            width: [[Button Size]] !important;
            height: [[Button Size]] !important;
            margin-inline: [[Margin]];
          }
          ha-card ha-state-icon {
            max-height: unset;
            width: unset;
          }

And then this is the card that’s added to each page with the according variables.

type: custom:decluttering-card
template: general_nav-bar
variables:
  - Icon 4: mdi:home
  - Icon 4 Color: rgba(var(--default-blue),1)

[Chykan (Andrew)]

When I get some time I might have to look into using decluttering card.

[loocd]

highly recommend - it makes everything so much cleaner - as depicted by my example. It’s actually quite a lot of code, but then in the actual card just 5 lines - you could even get by with just the first two ^^

There is now a new development called streamline-card which even has a UI editor. But it doesn’t seem to fully work yet in my case, which is why am currently still using decluttering card.

[zee36 (Zoltan G)]

Hi Everyone,

Have you tried this with the new ‘Sections’ layout (I belive this originally was set up under the ‘Sidebar’ layout).
The sticky floating navigation menu worked for me swapping from ‘sidebar’ to ‘sections’ layout till the 2025.1.1 update - now the navigation bar is acting as a simple card in the bottom of my dashboard - seems like the respective cardmod lines have been neutralised with the new update

[Chykan (Andrew)]

Mine (original code in this post) is still working but I have noticed the colours have disappeared from my buttons. Also working on my section views pages.

The card mod applied with the @media queries for the whole custom:mushroom-chips-card is working

            card_mod:
              style: |
                @media (orientation: portrait) and (max-width: 768px)  {
                  ha-card {
                    z-index:1;
                    position: fixed;
                    bottom: 5px;
                    left: 5px;
                    width: calc(100% - 10px);
                    background-color: transparent !important;
                    border-radius: 100px;
                    padding: 10px;
                    --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px!important;
                 }
                 }
                 @media (orientation: portrait) and (min-width: 769px)  {
                   ha-card {
                     z-index:1;
                     position: fixed;
                     bottom: 10px;
                     left: 50px;
                     width: calc(100% - 100px);
                     background-color: transparent !important;
                     border-radius: 100px;
                     padding: 10px;
                     --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
                     --chip-height: 60px;
                     --chip-border-radius: 50%;
                     --chip-icon-size: 30px;
                   }
                   }
                   @media (orientation: landscape) and (min-width: 1281px)  {
                     ha-card {
                       z-index:1;
                       position: fixed;
                       bottom: 5px;
                       left: 100px;
                       width: calc(100% - 200px);
                       background-color: transparent !important;
                       border-radius: 100px;
                       padding: 10px;
                       --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
                       --chip-height: 55px;
                       --chip-border-radius: 50%;
                       --chip-icon-size: 30px;
                     }
                     }
                     @media (orientation: landscape) and (min-height: 600px) and (max-height: 800px) and
                     (max-width: 1280px)  {
                       ha-card {
                         z-index: 1;
                         position: fixed;
                         bottom: 5px;
                         left: 50px;
                         width: calc(100% - 100px);
                         background-color: transparent !important;
                         border-radius: 100px;
                         padding: 10px;
                         --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
                         --chip-height: 55px;
                         --chip-border-radius: 50%;
                         --chip-icon-size: 30px;
                       }
                       }

but the card mod for the individual chips is not.

              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: input_boolean.chips_menu_toggle
                  icon: mdi:unfold-more-vertical
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,225,226,1) 100%);
                      }

[Chykan (Andrew)]

I have managed to get ‘some’ of my chip background colour back but HA is ignoring the separate colours applied to each chip by card-mod in my code.

card-mod is still making my menu float with @media queries, placed at the bottom of the card.

The colour is now applied to my chips via themes. I edited my caule-themes-pak-1.yaml and added the following. I also applied a 50% transparency with the 0.5 in the rgba colour.

  mush-chip-border-width: 2px
  mush-chip-border-color: "gray"
  mush-chip-background: "linear-gradient(45deg, rgba(60,0,103,0.5) 0%, rgba(138,43,226,0.5) 100%)"

The complete theme is listed below with mushroom variables I added at the bottom.

Caule Black Purple Glass:
  # App Header Background
  app-header-background-color: "black"
  # Change the value below 8px to 0px to remove the rounded corners
  ha-card-border-radius: 8px
  # Place the backgrounds in the folder  config/www/images/backgrounds 
  lovelace-background: 'center / cover no-repeat url("/hacsfiles/themes/caule-themes-pack-1/purple.jpg") fixed'
  # Main colors
  primary-color: "#7b52ab"
  light-primary-color: "#c983e4"
  graph-color: var(--primary-color)
  primary-background-color: "#0c0c0c"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#2c2c2c"
  disabled-color: "#5b5b5b"
  accent-color: "firebrick"
  # Text colors
  primary-text-color: "#e5e5e5"
  secondary-text-color: var(--disabled-color)
  text-primary-color: "#E5E5E5"
  disabled-text-color: var(--disabled-color)
  text-on-state-color: var(--ha-card-background)
  # Sidebar colors
  sidebar-icon-color: var(--primary-color)
  sidebar-text-color: var(--primary-text-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "goldenrod"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # Icons colors
  state-icon-color: var(--disabled-color)
  state-icon-active-color: var(--primary-color)
  state-icon-unavailable-color: var(--primary-background-color)
  # Settins and colors of Mini Media Player
  mini-media-player-icon-color: var(--primary-color)
  mini-media-player-accent-color: var(--primary-color)
  mini-media-player-progress-height: 8px
  # Papers slider colors
  paper-slider-knob-color: var(--primary-color)
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-container-color: var(--disabled-color)
  # Labels colors
  label-badge-background-color: var(--divider-color)
  label-badge-text-color: var(--primary-text-color)
  label-badge-red: var(--primary-color)
  label-badge-blue: var(--light-primary-color)

  # Cards colors
  ha-card-background: "rgba(100, 100, 100, 0.15)"
  paper-card-background-color: var(--ha-card-background)
  paper-listbox-background-color: var(--primary-background-color)
  # Toggle button colors
  paper-toggle-button-checked-button-color: var(--primary-color)
  paper-toggle-button-checked-bar-color: var(--light-primary-color)
  paper-toggle-button-unchecked-button-color: var(--disabled-color)
  paper-toggle-button-unchecked-bar-color: var(--primary-background-color)
  # Switch colors
  switch-checked-color: var(--paper-toggle-button-checked-button-color)
  switch-unchecked-button-color: var(--paper-toggle-button-unchecked-button-color)
  switch-unchecked-color: var(--paper-toggle-button-unchecked-bar-color)
  switch-unchecked-track-color: var(--paper-toggle-button-unchecked-bar-color)
  # Table colors
  table-row-background-color: var(--divider-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  card-background-color: var(--primary-background-color)
  #Animated icons
  weather-icon-clear-night: url("/hacsfiles/themes/caule-themes-pack-1/clear-night.svg")
  weather-icon-cloudy: url("/hacsfiles/themes/caule-themes-pack-1/cloudy.svg")
  weather-icon-fog: url("/hacsfiles/themes/caule-themes-pack-1/fog.svg")
  weather-icon-lightning: url("/hacsfiles/themes/caule-themes-pack-1/lightning.svg")
  weather-icon-lightning-rainy: url("/hacsfiles/themes/caule-themes-pack-1/lightning-rainy.svg")
  weather-icon-partlycloudy: url("/hacsfiles/themes/caule-themes-pack-1/partlycloudy.svg")
  weather-icon-pouring: url("/hacsfiles/themes/caule-themes-pack-1/pouring.svg")
  weather-icon-rainy: url("/hacsfiles/themes/caule-themes-pack-1/rainy.svg")
  weather-icon-hail: url("/hacsfiles/themes/caule-themes-pack-1/hail.svg")
  weather-icon-snowy: url("/hacsfiles/themes/caule-themes-pack-1/snowy.svg")
  weather-icon-snowy-rainy: url("/hacsfiles/themes/caule-themes-pack-1/snowy-rainy.svg")
  weather-icon-sunny: url("/hacsfiles/themes/caule-themes-pack-1/sunny.svg")
  weather-icon-windy: url("/hacsfiles/themes/caule-themes-pack-1/windy.svg")
  weather-icon-windy-variant: url("/hacsfiles/themes/caule-themes-pack-1/windy-variant.svg")
  weather-icon-exceptional: url("/hacsfiles/themes/caule-themes-pack-1/exceptional.svg")
  # Shadown
  ha-card-box-shadow: 'inset 0px 0px 0px 0px var(--divider-color)'
  # HACS
  hacs-badge-color: var(--primary-color)
  link-text-color: var(--disabled-color)
  markdown-code-background-color: var(--divider-color)
  google-blue-500: var(--primary-color)
  hacs-chip-color: var(--primary-color)
  # New
  mdc-text-field-fill-color: var(--ha-card-background)
  mdc-text-field-ink-color: var(--primary-text-color)
  mdc-select-fill-color: var(--ha-card-background)
  mdc-text-field-label-ink-color: var(--primary-color)
  input-fill-color: var(--primary-color)
  input-ink-color: var(--primary-text-color)
  input-label-ink-color: var(--primary-text-color)
  input-disabled-fill-color: var(--primary-background-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-disabled-label-ink-color: var(--disabled-text-color)
  input-idle-line-color: var(--primary-background-color)
  input-dropdown-icon-color: var(--secondary-text-color)
  input-hover-line-color: var(--primary-color)
  code-editor-background-color: var(--secondary-background-color)
  mdc-select-ink-color: var(--primary-text-color)
  mdc-select-label-ink-color: var(--secondary-text-color)
  mdc-select-idle-line-color: var(--primary-text-color)
  mdc-select-dropdown-icon-color: var(--secondary-text-color)
  mdc-select-hover-line-color: var(--primary-color)
  # Custom Mini Media Player
  mini-media-player-base-color: var(--primary-text-color) 
  # Swipe Card
  swiper-pagination-color: var(--primary-color)
  swiper-navigation-color: var(--primary-color)
  swiper-navigation-size: 48px
  swiper-preloader-color: gold
  # Mushroom layout
  mush-spacing: 10px
  # Title
  mush-title-padding: 24px 12px 8px
  mush-title-spacing: 8px
  mush-title-font-size: 24px
  mush-title-font-weight: normal
  mush-title-line-height: 32px
  mush-title-color: var(--primary-text-color)
  mush-title-letter-spacing: -0.288px
  # Subtitle
  mush-subtitle-font-size: 16px
  mush-subtitle-font-weight: normal
  mush-subtitle-line-height: 24px
  mush-subtitle-color: var(--secondary-text-color);
  mush-subtitle-letter-spacing: 0px
  # Mushroom Card
  mush-card-primary-font-size: 14px
  mush-card-secondary-font-size: 12px
  mush-card-primary-font-weight: 500
  mush-card-secondary-font-weight: 400
  mush-card-primary-line-height: 20px
  mush-card-secondary-line-height: 16px
  mush-card-primary-color: var(--primary-text-color)
  mush-card-secondary-color: var(--primary-text-color)
  mush-card-primary-letter-spacing: 0.1px
  mush-card-secondary-letter-spacing: 0.4px
  # Mushroom Chip
  mush-chip-spacing: 8px
  mush-chip-padding: 0 0.25em
  mush-chip-height: 36px
  mush-chip-border-radius: 19px
  mush-chip-border-width: 2px
  mush-chip-border-color: "gray"
  mush-chip-box-shadow: var(--ha-card-box-shadow, none)
  mush-chip-font-size: 0.3em
  mush-chip-font-weight: bold
  mush-chip-icon-size: 0.5em
  mush-chip-avatar-padding: 0.1em
  mush-chip-avatar-border-radius: 50%
  mush-chip-background: "linear-gradient(45deg, rgba(60,0,103,0.5) 0%, rgba(138,43,226,0.5) 100%)"
  # Mushroom Control
  mush-control-border-radius: 12px
  mush-control-height: 42px
  mush-control-button-ratio: 1
  mush-control-icon-size: 0.5em
  mush-control-spacing: 12px
  # Mushroom Slider
  mush-slider-threshold: 10
  # Mushroom Badge
  mush-badge-size: 16px
  mush-badge-icon-size: 0.75em
  mush-badge-border-radius: 50%
  # Mushroom Icon
  mush-icon-border-radius: 50%
  mush-icon-size: 36px
  mush-icon-symbol-size: 0.6em
  # Mushroom Colors
  mush-rgb-red: 244, 67, 54
  mush-rgb-pink: 233, 30, 99
  mush-rgb-purple: 106, 107, 201
  mush-rgb-deep-purple: 111, 66, 193
  mush-rgb-indigo: 63, 81, 181
  mush-rgb-blue: 33, 150, 243
  mush-rgb-light-blue: 3, 169, 244
  mush-rgb-cyan: 0, 188, 212
  mush-rgb-teal: 0, 150, 136
  mush-rgb-green: 76, 175, 80
  mush-rgb-light-green: 139, 195, 74
  mush-rgb-lime: 205, 220, 57
  mush-rgb-yellow: 255, 235, 59
  mush-rgb-amber: 255, 193, 7
  mush-rgb-orange: 255, 152, 0
  mush-rgb-deep-orange: 255, 111, 0
  mush-rgb-brown: 121, 85, 72
  mush-rgb-light-grey: 189, 189, 189;
  mush-rgb-grey: 158, 158, 158
  mush-rgb-dark-grey: 96, 96, 96;
  mush-rgb-blue-grey: 96, 125, 139
  mush-rgb-black: 0, 0, 0
  mush-rgb-white: 255, 255, 255
  # Mushroom Colors
  mush-rgb-info: var(--mush-rgb-blue)
  mush-rgb-success: var(--mush-rgb-green)
  mush-rgb-warning: var(--mush-rgb-orange)
  mush-rgb-danger: var(--mush-rgb-red)
  # Mushroom Fan
  mush-rgb-state-fan: var(--mush-rgb-green)
  mush-rgb-state-light: var(--mush-rgb-orange)
  mush-rgb-state-entity: var(--mush-rgb-blue)
  mush-rgb-state-switch: var(--mush-rgb-blue)
  # Mushroom Alarm
  mush-rgb-state-alarm-disarmed: var(--mush-rgb-info)
  mush-rgb-state-alarm-armed: var(--mush-rgb-success)
  mush-rgb-state-alarm-triggered: var(--mush-rgb-danger)
  # Mushroom Person
  mush-rgb-state-person-home: var(--mush-rgb-success)
  mush-rgb-state-person-not-home: var(--mush-rgb-danger)
  mush-rgb-state-person-zone: var(--mush-rgb-info)
  mush-rgb-state-person-unknown: var(--mush-rgb-grey)
  # Mushroom Cover
  mush-rgb-state-cover-open: var(--mush-rgb-blue)
  mush-rgb-state-cover-closed: var(--mush-rgb-disabled)
  # Mushroom Colors
  mush-rgb-state-climate-auto: var(--mush-rgb-green);
  mush-rgb-state-climate-cool: var(--mush-rgb-blue);
  mush-rgb-state-climate-dry: var(--mush-rgb-orange);
  mush-rgb-state-climate-fan-only: var(--mush-rgb-blue-grey);
  mush-rgb-state-climate-heat: var(--mush-rgb-deep-orange);
  mush-rgb-state-climate-heat-cool: var(--mush-rgb-green);
  mush-rgb-state-climate-idle: var(--mush-rgb-grey);
  mush-rgb-state-climate-off: var(--mush-rgb-disabled);

[Chykan (Andrew)]

@zee36 it seems it might be the card-mod 3 updates.

STRANGE THING When opening the app on my phone the colours of the buttons are applied through card-mod. When on computer (Chrome & Edge) the colours are not applied.

[Chykan (Andrew)]

@zee36

Mushroom Cards - Build a beautiful dashboard easily (Part 2)

seems to be an issue for some users that downgrade from card_mod 3.5.0 (which was removed) to 3.4.4. Just read a success from another user after having downgraded to 3.4.3, and then upgraded to 3.4.4

[Chykan (Andrew)]

THEMES FOR STICKY FLOATING NAVIGATION MENU - All Devices - Mushroom Chips Card

FULL CODE FOR CARD IS AVAILABLE FROM THIS LINK

CARD-MOD COLOURED PEBBLE

• No Transparency
  
  

CARD-MOD COLOURED GLASS

• Allows to see through buttons and any information they may be blocking
  
  

INNER GLOW

• Allows to see through buttons and any information they may be blocking
  
  

INNER GLOW OUTLINE

• Allows to see through buttons and any information they may be blocking
  
  

MUSHROOM THEME SELECTOR IS HERE

• custom:mushroom-select-card
• Add to dashboard via GUI
• Change themes right from the dashboard

[Chykan (Andrew)]

MUSHROOM CHIP THEME SELECTOR IS HERE

• custom:mushroom-select-card
• Add to dashboard via GUI
• Change themes right from the dashboard