Skip to main content

Dashboard Adjustements

Padding​

If you're using the Navbar Card, you might notice it could collide with other cards on your dashboard. navbar-card now includes an automatic padding feature that handles this for you, eliminating the need for manual CSS adjustments.

The navbar-card automatically adds appropriate padding to prevent overlaps:

  • Desktop: Adds padding to the left or right side based on your navbar position
  • Mobile: Adds bottom padding to prevent cards from overlapping the bottom navbar

This feature is enabled by default, but you can customize it using the layout.auto_padding configuration. More info here

Manual Adjustement (Legacy)​

If you prefer to handle padding manually or need more control, you can disable automatic padding and use CSS instead:
type: custom:navbar-card
layout:
  auto_padding:
    enabled: false # Disable automatic padding

Then use card-mod with a custom theme to add manual padding:

your_theme:
  card-mod-theme: your_theme
  card-mod-root-yaml: |
    .: |
      /* Add padding to the left (or other sides, depending on your navbar position) for desktop screens */
      @media (min-width: 768px) {
        :not(.edit-mode) > #view {
          padding-left: 100px !important;
        }
      }

      /* Add bottom padding for mobile screens to prevent cards from overlapping with the navbar */
      @media (max-width: 767px) {
        :not(.edit-mode) > hui-view:after {
          content: "";
          display: block;
          height: 80px;
          width: 100%;
          background-color: transparent; 
        }
      }


Hiding native tabs​

Another useful styling detail, is removing the native ha-tabs element on the top of the screen. We want to hide the ha-tabs element, but keep the edit, search and assist buttons visible. To do so, once again, using card-mod with a custom theme is quite easy:

For Home Assistant < 2025.0​

your_theme:
  app-header-background-color: transparent
  app-header-text-color: var(--primary-text-color)

  card-mod-theme: your_theme
  card-mod-root-yaml: |
    .: |
      ha-tabs {
        pointer-events: none;
        opacity: 0;
      }

For Home Assistant between 2025.0 and 2025.9​

your_theme:
  app-header-background-color: transparent
  app-header-text-color: var(--primary-text-color)

  card-mod-theme: your_theme
  card-mod-root-yaml: |
    .: |
      .toolbar > sl-tab-group {
        pointer-events: none;
        opacity: 0;
      }

For Home Assistant ≥ 2025.10​

your_theme:
  app-header-background-color: transparent
  app-header-text-color: var(--primary-text-color)

  card-mod-theme: your_theme
  card-mod-root-yaml: |
    .: |
      .toolbar > ha-tab-group {
        pointer-events: none;
        opacity: 0;
      }