T4 Framework Off-canvas menu only displays up to 3 levels...

luismeigo

I'm developing a site (is in my local environment and not exposed to the Internet) that has some menus with up to 6 levels of sub menus, but with Off-Canvas it goes to the third level and when trying to show the forth, it comes back... if I try again to enter that 4th level (or any other) it no longer shows any menu... just blank...

saguaros

You can try this custom CSS:

.t4-offcanvas .t4-off-canvas-body .mod-menu-flex .drilldown-effect .navbar-nav .dropdown-menu {
  top: 0;
  transform: none;
}

.t4-offcanvas.oc-level-3 .drilldown-effect .navbar-nav {
  transform: translateX(-300%);
}

.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .nav-item {
  position: static;
  transform: none;
}

luismeigo

Thank you but this code only allows one more level of navigation and then it does the same thing, goes back (instead of entering the next level) and after that when trying to navigate if does not show any menu item (it seams that menus are disabled by js and not enabled again)...

Now I can navigate to 4 sub-menu but I still have at least 2 more sub-menus to navigate to...

saguaros

You can share the login info of your site eg: URL + super admin account + FTP account so I can check directly for you.

luismeigo

This is a local dev machine not connected to the Internet... I'm migrating this site https://estatistica.madeira.gov.pt/en/ to Joomla 4.

I can't share the machine outside my LAN.

But this problem can be easily replicated in any site using T4 and Off-canvas..., just create a menu with more than 4 sub-levels and try it on off-canvas...

saguaros

Try this one:

/*off-canvas issue*/
.t4-offcanvas .t4-off-canvas-body .mod-menu-flex .drilldown-effect .navbar-nav .dropdown-menu {
  top: 0;
  transform: none;
}

.t4-offcanvas.oc-level-3 .drilldown-effect .navbar-nav {
  transform: translateX(-300%);
}

.t4-offcanvas.oc-level-4 .drilldown-effect .navbar-nav {
  transform: translateX(-400%);
}

.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .nav-item {
  position: static;
  transform: none;
}

luismeigo

It din't work all the way down the sub-menus but I managed to adapt the code to work... Following your line of thinking, I added 5th and 6th navigation levels...

/*off-canvas issue*/
.t4-offcanvas .t4-off-canvas-body .mod-menu-flex .drilldown-effect .navbar-nav .dropdown-menu {
  top: 0;
  transform: none;
}

.t4-offcanvas.oc-level-3 .drilldown-effect .navbar-nav {
  transform: translateX(-300%);
}

.t4-offcanvas.oc-level-4 .drilldown-effect .navbar-nav {
  transform: translateX(-400%);
}

.t4-offcanvas.oc-level-5 .drilldown-effect .navbar-nav {
  transform: translateX(-500%);
}

.t4-offcanvas.oc-level-6 .drilldown-effect .navbar-nav {
  transform: translateX(-600%);
}

.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .nav-item {
  position: static;
  transform: none;
}

Thank you!