Menu Text & Icons mis-aligned

[ry8s]

Is there some styling I can add to line up the icons with the next? The icon sits a little lower than the text and looks a little off, especially when on a tablet or smaller device

[DBuit]

Hi @ry8s,

Can you share your config?

[ry8s]

Hi @ry8s,

Can you share your config?

sidebar:
  hideTopMenu: true
  hideHassSidebar: true
  digitalClock: true
  digitalClockWithSeconds: true
  twelveHourVersion: true
  date: true
  dateFormat: dddd, MMMM DD YYYY
  width:
    mobile: 0
    tablet: 25
    desktop: 15
  style: |
    .sidebarMenu li{
        line-height: 10px !important;
    }
    .template li{
        font-size: 15px !important;
    }
    .digitalClock {
        font-size: 35px !important;
        line-height: 10px !important;
    }
  sidebarMenu:
    - action: navigate
      navigation_path: /lovelace/tablet
      name: Home
      active: true
      icon: mdi:home
    - action: navigate
      navigation_path: /lovelace/bedroom
      name: Bedroom
      icon: mdi:bed
    - action: navigate
      navigation_path: /lovelace/office
      name: Office
      icon: mdi:laptop
    - action: navigate
      navigation_path: /lovelace/lr
      name: Living Room
      icon: mdi:sofa
    - action: navigate
      navigation_path: /lovelace/kitchen
      name: Kitchen
      icon: mdi:stove
    - action: navigate
      navigation_path: /lovelace/basement
      name: Basement
      icon: mdi:virtual-reality
    - action: navigate
      navigation_path: /lovelace/garage
      name: Garage
      icon: mdi:car
    - action: navigate
      navigation_path: /lovelace/nye
      name: New Years!
      icon: mdi:party-popper
  template: |
    <li>
      Currently {{states('sensor.outside_temp') |float|round(0)}}°F & {{states('weather.moncoeur') | title }}
    </li>
        {% if states('sensor.meow_motel_waste_drawer') | float > 90 %} <li>Meow
    Motel is {{states('sensor.meow_motel_waste_drawer')}}% full</li> {% endif %}

    {% if states('sensor.the_tabaxi_inn_waste_drawer') | float > 90 %}
    <li>Tabaxi Inn is {{states('sensor.the_tabaxi_inn_waste_drawer')}}%
    full</li> {% endif %}
  bottomCard:
    type: vertical-stack
    cardOptions:
      cards:
        - type: horizontal-stack
          cards:
            - type: conditional
              conditions:
                - entity: binary_sensor.updater
                  state: 'on'
              card:
                type: custom:button-card
                entity: binary_sensor.updater
                icon: mdi:swap-vertical
                color: '#41bdf5'
                color_type: card
                aspect_ratio: 4/1
                label: |
                  [[[
                    return states['binary_sensor.updater'].attributes.newest_version;
                  ]]]
                name: HA Update available
                tap_action:
                  action: navigate
                  navigation_path: /hassio/update-available/core
                styles:
                  card:
                    - font-size: 15px
            - type: conditional
              conditions:
                - entity: sensor.hacs
                  state_not: '0'
              card:
                type: custom:button-card
                entity: sensor.hacs
                icon: mdi:unfold-more-horizontal
                color: '#f541d6'
                color_type: card
                show_label: true
                show_name: false
                aspect_ratio: 4/1
                label: |
                  [[[
                   return states['sensor.hacs'].state + " HACS Updates";
                  ]]]
                tap_action:
                  action: navigate
                  navigation_path: /hacs/entry
                styles:
                  card:
                    - font-size: 15px
        - type: horizontal-stack
          cards:
            - type: button
              tap_action:
                action: call-service
                service: script.goodnight
                service_data: {}
                target: {}
              entity: script.goodnight
              show_name: false
            - type: button
              tap_action:
                action: call-service
                service: script.leaving
                service_data: {}
                target: {}
              entity: script.leaving
              show_name: false
            - type: button
              tap_action:
                action: call-service
                service: script.vacuum
                service_data: {}
                target: {}
              entity: script.vacuum
              show_state: false
              show_name: false
            - type: button
              tap_action:
                action: call-service
                service: script.walk
                service_data: {}
                target: {}
              entity: script.watch_tv
              show_name: false

[ry8s]

I was able to fix it by adding this to styles:

.sidebarMenu li ha-icon {
  margin-top: -8px !important;
}

[timoerti]

I was able to fix it by adding this to styles:

.sidebarMenu li ha-icon {
  margin-top: -8px !important;
}

Can you Share your config

[ry8s]

I was able to fix it by adding this to styles:

.sidebarMenu li ha-icon {
  margin-top: -8px !important;
}

Can you Share your config

sidebar:
  hideTopMenu: true
  showTopMenuOnMobile: true
  hideHassSidebar: true
  digitalClock: true
  digitalClockWithSeconds: true
  twelveHourVersion: true
  date: true
  dateFormat: dddd, MMMM DD YYYY
  width:
    mobile: 0
    tablet: 20
    desktop: 20
  style: |
    .sidebarMenu li{
        line-height: 10px !important;
    }
    .template li{
        font-size: 15px !important;
    }
    .digitalClock {
        font-size: 35px !important;
        line-height: 10px !important;
    }
    .sidebarMenu li ha-icon {
      margin-top: -8px !important;
    }