Header Position Card

Overview

Header Position Card is a custom utility card for Home Assistant that allows you to cleanly change the position of the header navigation bar on your dashboards.

By default, Home Assistant locks the navigation header to the top of the screen. With this card, you can easily move it to the bottom, optimizing reachability on mobile devices and improving the overall dashboard experience.

(Shoutout to javawizard who came up with the original idea. I applied several modifications and a GUI Editor to make it significantly easier and more robust to work with.)

✨ Features

• 📱 Device-Specific Positioning - Move the header to the bottom only on specific devices (e.g., Mobile only, Tablet only, or Desktop).
• 🌍 Global Mode - Apply the custom header position to all dashboards at once, rather than on a per-dashboard basis.
• 🍏 iOS Compatible - Carefully optimized to look native and respect safe areas on iOS devices (both with and without a Home Button).
• 👻 Invisible Helper - This card does not display anything on your actual dashboard; it only runs in the background. It is solely visible when you open the Edit mode.
• 🧠 100% GUI Editor Ready - Effortlessly configure the entire card through the visual editor without needing to write YAML.

📥 Installation

Method 1: HACS (Recommended)

The easiest way to install and keep Header Position Card updated is via HACS.

1. Ensure HACS is installed.
2. Open HACS in Home Assistant.
3. Search for Header Position Card, or add this repository (https://github.com/xBourner/header-position-card) as a Custom Repository under the Dashboard category.
4. Download and Install.
5. Clear your browser cache and refresh (F5) the page.

Method 2: Manual Install

1. Download the header-position-card.js file from the latest release.
2. Put the header-position-card.js file into your config/www folder.
3. Add a reference to header-position-card.js in your Dashboard. There are two ways to do that:
   • Using UI: Settings → Dashboards → More Options icon → Resources → Add Resource → Set Url as /local/header-position-card.js → Set Resource type as JavaScript Module. (Note: If you do not see the Resources menu, you will need to enable Advanced Mode in your User Profile)
   • Using YAML: Add the following code to your lovelace section:

      resources:
      - url: /local/header-position-card.js
        type: module

⚙️ Configuration & Usage

Once installed, simply edit your dashboard, click Add Card, and search for Header Position Card.

By default, the card isn't shown on your dashboard layout—it is a purely functional background card that is only visible when the dashboard editor is active!

Settings

Choose the device viewports where you want the navbar location to change (similar to the native visibility options in Home Assistant). You can select multiple options, and the header will snap to the bottom on all selected breakpoints.

YAML Example

If you prefer YAML over the Visual Editor, here is an example configuration:

type: custom:header-position-card
Style:
  - mobile
  - tablet
  - desktop
  - wide
global_mobile: true
global_wide: false

❤️ Support My Work

Developing and maintaining custom cards takes a lot of time and coffee. If you enjoy using Header Position Card and want to support its ongoing development, I would greatly appreciate it!

Join the community Discord server to leave feedback, request features, or get help with your configuration.

---

🔝 Back to top