Nav Bar Position Stuck At Top

I really liked your take on the bottom nav bar, however using the code found in your rounded.yaml results in the nice larger buttons, but it is positioned at the top unlike the screenshots that you included.

y5bo44F

Using this section of code below it results in the picture above. Even if I use your entire rounded.yaml, it still stays at the top.

# Move navbar
 card-mod-root-yaml: |
    ha-tabs$: |
      #tabsContent {
        width: 97%;
        display: flex;
      }
      paper-icon-button {
        display: none;
      }
    .: |
      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
          display: none !important;
        }
      div#view{
        transform: initial;
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        padding-bottom: var(--header-height) !important;
      }
      .header {
        top: auto !important;
        bottom: 0; !important
        transform: translate3d(0px, 0px, 0px) !important;
        backdrop-filter: blur(50px);
        -webkit-backdrop-filter: blur(50px);
        -moz-backdrop-filter: blur(50px);
        -o-backdrop-filter: blur(50px);
        -ms-backdrop-filter: blur(50px);
        background-color: var(--contrast0) !important;
      }
      :host([scrolled]) .header {
        box-shadow: none !important;
      }
      .toolbar {
        height: var(--header-height) !important;
        padding: 10px 0px !important;
      }
      #view {
        padding-top: calc(-1 * var(--header-height)) !important;
      }
      ha-tabs {
        --paper-tabs-selection-bar-color: var(--header-tab-indicator-color) !important;
        --mdc-icon-size: 26px;
        display: flex;
        justify-content: space-between !important;
        padding: 20px;
        margin-top:15px;
        height:var(--header-height) !important;
      }
      paper-tab[aria-selected=true] {
        color: var(--header-active-tab-color);
        background-color: var(--header-active-tab-bg-color);
      }
      paper-tab {
        color: var(--header-all-tabs-color);
        border-radius: 17px;
        height:50px;
        padding: 0 20px;
      }

I tried out the section you commented out as well to see what that was, and the commented out code successfully moves the nav bar to the bottom but without the nicer formatting you have achieved in the code that isn't commented out.

Any chance you are able to help me figure out how to get it to show the nav bar like your screenshots show?

panhans / HomeAssistant

Nav Bar Position Stuck At Top #9