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 based on your navbar position (desktop.position), including top/bottom padding when the navbar is docked to the top or bottom, or left/right padding when it is docked to the sides.
  • Mobile: Adds bottom padding to prevent cards from overlapping the bottom navbar.
  • Media player widget: When the media player widget is visible, extra padding is added using layout.auto_padding.media_player_px so that both the navbar and media player stay clear of your dashboard cards on desktop and mobile.

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;
      }