Espace entre navbar et premier cadre

Entraide Home Assistant
1

Bonjour,

Je voudrais faire en sorte que sur tablette ou pc l’espace entre la navbar et le premier cadre soit juste de 5 pixels.

espace
espace1920×718 578 KB

Merci pour votre aide, si cela est possible

[center]## System Information

version core-2026.4.0b8
installation_type Home Assistant OS
dev false
hassio true
docker true
container_arch amd64
user root
virtualenv false
python_version 3.14.2
os_name Linux
os_version 6.12.77-haos
arch x86_64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
HACS Data ok
GitHub API Calls Remaining 5000
Installed Version 2.0.5
Stage running
Available Repositories 2948
Downloaded Repositories 85
Solcast Solar
can_reach_server ok
Home Assistant Cloud
logged_in true
subscription_expiration 24 avril 2026 à 02:00
relayer_connected true
relayer_region eu-central-1
remote_enabled true
remote_connected true
alexa_enabled true
google_enabled false
cloud_ice_servers_enabled true
remote_server eu-central-1-29.ui.nabu.casa
certificate_status ready
instance_id 8c36973f84104af8a4db572502b3723e
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 17.2.rc2
update_channel beta
supervisor_version supervisor-2026.03.3
agent_version 1.8.1
docker_version 29.3.1
disk_total 89.8 GB
disk_used 13.9 GB
nameservers 2001:861:4f45:3cb0:ba8c:2bff:fe14:f8f4, 192.168.1.254
healthy true
supported true
host_connectivity true
supervisor_connectivity true
ntp_synchronized true
virtualization kvm
board ova
supervisor_api ok
version_api ok
installed_addons Matter Server (8.3.0), Mosquitto broker (6.5.2), Zigbee2MQTT (2.9.1-1), Beem Energy (0.2.5), File editor (5.8.0), Get HACS (1.3.1), Let’s Encrypt (6.2.0), Samba Backup (5.2.0), Linky (1.7.0), Terminal & SSH (10.0.2), go2rtc (1.9.14)
Dashboards
dashboards 5
resources 53
views 15
mode storage
Network Configuration
adapters lo (disabled), enp0s18 (enabled, default, auto), docker0 (disabled), hassio (disabled), veth81fca76 (disabled), veth57dd70e (disabled), vetha8260f1 (disabled), veth59bad4d (disabled), veth1db729e (disabled), vethee67b36 (disabled), veth17c4d33 (disabled), vethe317508 (disabled), veth684fba6 (disabled), vethb6cd2aa (disabled), veth8679389 (disabled), veth4863171 (disabled)
ipv4_addresses lo (127.0.0.1/8), enp0s18 (192.168.1.18/24), docker0 (172.30.232.1/23), hassio (172.30.32.1/23), veth81fca76 (), veth57dd70e (), vetha8260f1 (), veth59bad4d (), veth1db729e (), vethee67b36 (), veth17c4d33 (), vethe317508 (), veth684fba6 (), vethb6cd2aa (), veth8679389 (), veth4863171 ()
ipv6_addresses lo (::1/128), enp0s18 (2001:861:4f45:3cb0:fcb2:ebe4:a8dc:71d5/64, fe80::2120:e3dc:27cf:3106/64), docker0 (fe80::fb:11ff:fe68:73f3/64), hassio (fe80::48de:bfff:fe8c:e6fa/64), veth81fca76 (fe80::c853:ecff:fec5:8b53/64), veth57dd70e (fe80::e44a:3ff:fe47:4e54/64), vetha8260f1 (fe80::403:b7ff:fe5f:4e0d/64), veth59bad4d (fe80::a82f:8ff:fe0e:710c/64), veth1db729e (fe80::9cdc:39ff:fee1:24a5/64), vethee67b36 (fe80::106e:b8ff:fecb:10cc/64), veth17c4d33 (fe80::f8af:37ff:fe93:2478/64), vethe317508 (fe80::4439:59ff:fe62:9497/64), veth684fba6 (fe80::784d:bcff:fe7b:db05/64), vethb6cd2aa (fe80::8806:7cff:fe17:ba86/64), veth8679389 (fe80::7ce3:97ff:fe0c:cc95/64), veth4863171 (fe80::94f6:e9ff:fecb:bb63/64)
announce_addresses 192.168.1.18, 2001:861:4f45:3cb0:fcb2:ebe4:a8dc:71d5, fe80::2120:e3dc:27cf:3106
Recorder
oldest_recorder_run 29 mars 2026 à 10:22
current_recorder_run 1 avril 2026 à 07:32
estimated_db_size 722.80 MiB
database_engine sqlite
database_version 3.49.2
[/center] ___
2

Bonjour,
avec mode: docked ?

desktop:
  mode: docked
3

je l’ajoute où le code? svp

4 
type: custom:navbar-card
desktop:
  mode: docked

si tu as déjà l’option desktop:, rajoute que mode: docked

image
image965×108 3.84 KB

tu dois déja utiliser l’option, vu que ton nav-bar est en haut et que par défaut c’est en bas de l’écran.

descktop:
  position: top
5

comme ça, je pense

desktop:
  mode: docked
  position: top
  show_labels: true
  show_popup_label_backgrounds: true
  background_color: '#121212'
6

oui, comme ça, c’est bon.

7

sa a modifier mon navbar, mais l’espace est toujours là

espace1
espace11920×510 358 KB

8

c’est le code de mon navbar

type: custom:navbar-card
routes:
  - url: /dashboard-essais/0
    icon: mdi:home
    label: Home
    badge:
      show: true
      text_color: white
      background_color: "#2196F3"
  - url: /dashboard-essais/etage
    icon: mdi:home-floor-2
    label: Etage
    selected_color: "#4CAF50"
  - url: /dashboard-essais/rez-de-chaussee
    icon: mdi:home-floor-1
    label: RdeC
    selected_color: "#8BC34A"
  - url: /dashboard-essais/sous-sol
    icon: mdi:home-floor-0
    label: Sous-sol
    selected_color: "#CDDC39"
  - url: /dashboard-essais/exterieur
    icon: mdi:flower
    label: Extérieur
    selected_color: "#FFC107"
  - url: /dashboard-essais/spa
    icon: mdi:spa
    label: Spa
    selected_color: "#00BCD4"
  - url: /dashboard-essais/sante
    icon: mdi:heart
    label: Santé
    selected_color: "#E91E63"
  - url: /dashboard-essais/electromenager
    icon: mdi:washing-machine
    label: Appareils
    selected_color: "#9C27B0"
  - url: /dashboard-essais/consommation
    icon: mdi:power-socket-fr
    label: Énergie
    selected_color: "#FF5722"
  - url: /dashboard-essais/solaire
    icon: mdi:solar-power-variant
    label: Solaire
    selected_color: "#FFC107"
  - url: /dashboard-essais/plantes
    icon: mdi:flower-tulip-outline
    label: Plantes
    selected_color: "#4CAF50"
  - url: /dashboard-essais/tracker
    icon: mdi:map-marker-account
    label: Tracker
    selected_color: "#795548"
  - url: /dashboard-essais/alertes
    icon: mdi:robot
    label: Alertes
    selected_color: "#75d548"
grid_options:
  columns: 120
  rows: auto
desktop:
  mode: docked
  position: top
  show_labels: true
  show_popup_label_backgrounds: true
  background_color: "#121212"
styles:
  host:
    "--navbar-card-active-shadow": >-
      0 0 10px var(--navbar-card-active-color), 0 0 24px
      var(--navbar-card-active-color), 0 0 48px var(--navbar-card-active-color),
      0 0 70px var(--navbar-card-active-color);
    "--navbar-card-inactive-shadow": 0 0 6px rgba(255,255,255,0.15), 0 0 14px rgba(255,255,255,0.08);
  item:
    border-radius: 16px;
    box-shadow: var(--navbar-card-inactive-shadow);
    transition: all 0.8s ease;
    background: rgba(0,0,0,0.4);
  item_active:
    box-shadow: var(--navbar-card-active-shadow);
    transform: scale(1.06);
    filter: brightness(1.3) saturate(1.5);
9

partage ton code du nav-bar que je test chez moi. dans la balise texte préformaté stp.

10

tu as tester sans mettre ces options ?
columns à 120 :thinking:

11

c’est bon, j’ai compris. dans la configuration da ta vue en mode section, tu as du coché l’option :
image
désactive la .

option activé :

image
image1616×232 8.54 KB

option désactivé

image
image1618×168 8.4 KB

12

non je n’est pas coché cette option

13

tu regarde bien dans l’édition de ta vue ?
image

image
image1014×862 36.4 KB

chez moi ton code fonctionne sans tout l’espace que tu montre sans cocher c’est option.

14

option
option1876×708 47.3 KB

15

ok, tu as supprimé ces lignes ?

grid_options:
  columns: 120
  rows: auto

image
image1620×267 17.1 KB

16

est-ce que l’espace peut-etre la dedans

type: custom:button-card
show_name: false
show_icon: false
card_mod:
  style: |
    ha-card {
      background: rgba(0, 50, 150, 0.1) !important;
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border: 2px solid #00d4ff !important;
      border-radius: 15px !important;
      box-shadow: 0 0 15px rgba(0, 212, 255, 0.2) !important;
      padding: 12px !important;
      color: white;
      :host {
      margin-top: -34px !important;
    }
    }
styles:
  card:
    - padding: 5px
  grid:
    - grid-template-areas: "\"header header\" \"left right\""
    - grid-template-columns: 1fr 320px
    - grid-template-rows: auto 1fr
custom_fields:
  header: |
    [[[
      const sun = states['sun.sun'];
      const nr = new Date(sun.attributes.next_rising).getTime();
      const ns = new Date(sun.attributes.next_setting).getTime();
      const tr = nr < ns ? nr : nr - 86400000;
      const sunrise = new Date(tr).toLocaleTimeString('fr-FR', {hour: '2-digit', minute:'2-digit'});
      const sunset = new Date(ns).toLocaleTimeString('fr-FR', {hour: '2-digit', minute:'2-digit'});
      const diff = (ns - tr);
      const h = Math.floor(diff / 3600000);
      const m = Math.floor((diff % 3600000) / 60000);
      const day = Math.floor((new Date() - new Date(new Date().getFullYear(), 0, 0)) / 86400000);
      let v = day <= 80 ? (1.5 + (day * 0.03)) : day <= 172 ? (4.0 - ((day - 80) * 0.043)) : day <= 264 ? (0 - ((day - 172) * 0.043)) : (-4.0 + ((day - 264) * 0.04));

      return `
        <div style="display: flex; justify-content: space-between; font-family: monospace; font-size: 15px; border-bottom: 1.5px solid rgba(0,212,255,0.3); padding-bottom: 10px; margin-bottom: 12px;">
          <span>🌅 Lever: <b>${sunrise}</b> | 🌇 Coucher: <b>${sunset}</b></span>
          <span style="color: #00d4ff;">⏱️ <b>${h}h${m}</b> | 📈 Var: <b>${v > 0 ? '+' : ''}${v.toFixed(1)}m</b></span>
        </div>
      `;
    ]]]
  left: |
    [[[
      const w = states['weather.pirateweather'].attributes;
      const uv = states['sensor.colmar_uv']?.state || '0';
      const rain = states['sensor.colmar_daily_precipitation']?.state || '0';
      const moon = states['sensor.phase_de_la_lune_fr']?.state || 'N/A';
      return `
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-family: monospace; font-size: 14px; line-height: 1.6;">
          <div>
            🌡️ Temp: <b>${w.temperature}°C</b><br>
            🌬️ Vent: <b>${w.wind_speed}km/h</b><br>
            👁️ Visibilité: <b>${w.visibility}km</b><br>
            🌬️ Pression: <b>${w.pressure} hPa</b>
          </div>
          <div style="border-left: 1.5px solid rgba(0,212,255,0.2); padding-left: 15px;">
            💧 Humidité: <b>${w.humidity}%</b><br>
            ☀️ UV: <b>${uv}</b> | 🌧️ <b>${rain}mm</b><br>
            🌙 Lune: <b>${moon}</b><br>
            🤗 Ressenti: <b>${w.apparent_temperature}°C</b>
          </div>
        </div>
      `;
    ]]]
  right: |
    [[[ 
      const p = states['sensor.prises_allumees_specifiques']?.state || '0';
      const l = states['sensor.lumieres_allumees_2']?.state || '0';
      const po = states['sensor.portes_ouvertes']?.state || '0';
      const f = states['sensor.fenetres_ouvertes']?.state || '0';
      return `
        <div style="display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(0,212,255,0.12); border-radius: 12px; padding: 12px 5px; border: 1px solid rgba(0,212,255,0.3); font-family: monospace; font-size: 11px; text-align: center; align-items: center; margin-left: 10px;">
          <div><img src="/local/images/priseelectriqueon.png" width="28"><br><b style="font-size:16px; color:#00d4ff;">${p}</b><br>Prises</div>
          <div><img src="/local/images/Ampoule_ON.png" width="28"><br><b style="font-size:16px; color:#00d4ff;">${l}</b><br>Lumières</div>
          <div><img src="/local/images/porteentree_on.png" width="28"><br><b style="font-size:16px; color:#00d4ff;">${po}</b><br>Portes</div>
          <div><img src="/local/images/fenetre2_on.png" width="28"><br><b style="font-size:16px; color:#00d4ff;">${f}</b><br>Fenêtres</div>
        </div>
      `;
    ]]]
view_layout:
  grid-column: 1
  grid-row: 2
grid_options:
  columns: 36
  rows: auto
17

pour button-card, pour que l’option grid_option: fonctionne, tu dois ajouter la ligne section_mode: true

non, ton button-card, n’est pas en cause. chez moi j’ai pas d’espace avec ton code button-card.

18

sa fait des jours que je cherche et je ne trouve pas d’ou ça vient

1 « J'aime »
19

oui je les aient supprimer

type: custom:navbar-card
routes:
  - url: /dashboard-essais/0
    icon: mdi:home
    label: Home
    badge:
      show: true
      text_color: white
      background_color: "#2196F3"
  - url: /dashboard-essais/etage
    icon: mdi:home-floor-2
    label: Etage
    selected_color: "#4CAF50"
  - url: /dashboard-essais/rez-de-chaussee
    icon: mdi:home-floor-1
    label: RdeC
    selected_color: "#8BC34A"
  - url: /dashboard-essais/sous-sol
    icon: mdi:home-floor-0
    label: Sous-sol
    selected_color: "#CDDC39"
  - url: /dashboard-essais/exterieur
    icon: mdi:flower
    label: Extérieur
    selected_color: "#FFC107"
  - url: /dashboard-essais/spa
    icon: mdi:spa
    label: Spa
    selected_color: "#00BCD4"
  - url: /dashboard-essais/sante
    icon: mdi:heart
    label: Santé
    selected_color: "#E91E63"
  - url: /dashboard-essais/electromenager
    icon: mdi:washing-machine
    label: Appareils
    selected_color: "#9C27B0"
  - url: /dashboard-essais/consommation
    icon: mdi:power-socket-fr
    label: Énergie
    selected_color: "#FF5722"
  - url: /dashboard-essais/solaire
    icon: mdi:solar-power-variant
    label: Solaire
    selected_color: "#FFC107"
  - url: /dashboard-essais/plantes
    icon: mdi:flower-tulip-outline
    label: Plantes
    selected_color: "#4CAF50"
  - url: /dashboard-essais/tracker
    icon: mdi:map-marker-account
    label: Tracker
    selected_color: "#795548"
  - url: /dashboard-essais/alertes
    icon: mdi:robot
    label: Alertes
    selected_color: "#75d548"
desktop:
  position: top
  show_labels: true
  show_popup_label_backgrounds: true
  background_color: "#121212"
styles:
  host:
    "--navbar-card-active-shadow": >-
      0 0 10px var(--navbar-card-active-color), 0 0 24px
      var(--navbar-card-active-color), 0 0 48px var(--navbar-card-active-color),
      0 0 70px var(--navbar-card-active-color);
    "--navbar-card-inactive-shadow": 0 0 6px rgba(255,255,255,0.15), 0 0 14px rgba(255,255,255,0.08);
  item:
    border-radius: 16px;
    box-shadow: var(--navbar-card-inactive-shadow);
    transition: all 0.8s ease;
    background: rgba(0,0,0,0.4);
  item_active:
    box-shadow: var(--navbar-card-active-shadow);
    transform: scale(1.06);
    filter: brightness(1.3) saturate(1.5);
20

j’arrive pas a reproduire ton espace.

image
image1918×159 58.4 KB

seul avec l’option Ajouter un espace supplémentaire au-dessus coché me le fait :

image
image1918×250 61.6 KB