.navbar changes in the same view

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

try by changeing the css var on each page


// 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

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.

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)
      root.style.setProperty('--f7-toolbar-height', '50px')
      store.dispatch('common/setToolbarButtons', 0)