.navbar changes in the same view

1

Is it possible to change the height on the navbar on two seperate pages?

Dynamic navbar is enabled so can’t be targeted with .page as it’s now a child of .view

2

try by changeing the css var on each page

https://framework7.io/docs/navbar.html#css-variables

// Page 1
.page1-nav {
  --f7-navbar-height: 54px;
}

// Page 2
.page2-nav {
  --f7-navbar-height: 84px;
}

the code is just an example, adapt it to your needs

3

I can’t target the navbar with .page as iosDynamicNavbar places the navbar out of the page container and makes it a child of .view on v4.

4

ok, so change the css vars with js depending on the data-page init ()

a small part of my code in an app that i change the toolbar, but it showld work for navbar

  • ignore the store parts.
// bind events
this.$f7.view.main.router.on('pageBeforeIn', setToolbarHeight)

export function setToolbarHeight (page) {
  let admin = store.getters['common/userData'].admin
  let pageName = page.name ? page.name : ''
  let root = document.documentElement
  switch (pageName) {
    case 'news':
      if (admin === 1) {
        root.style.setProperty('--f7-toolbar-height', '100px')
        store.dispatch('common/setToolbarButtons', 1)
      }
      break
    default:
      root.style.setProperty('--f7-toolbar-height', '50px')
      store.dispatch('common/setToolbarButtons', 0)
      break
  }
}