Offcanvas Menu for Cassiopeia

offcanvas-metismenu.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   (C) 2021 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;

HTMLHelper::_('bootstrap.offcanvas');
?>

<nav class="navbar navbar-expand-lg">
	<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbar<?php echo $module->id; ?>" aria-controls="navbar<?php echo $module->id; ?>" aria-expanded="false" aria-label="<?php echo Text::_('MOD_MENU_TOGGLE'); ?>">
		<span class="icon-menu" aria-hidden="true"></span>
	</button>
	<div class="offcanvas offcanvas-start" id="navbar<?php echo $module->id; ?>">
		<div class="offcanvas-header">
			<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
		</div>
		<div class="offcanvas-body">
			<?php require __DIR__ . '/dropdown-metismenu.php'; ?>
		</div>
	</div>
</nav>

offcanvas.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   (C) 2021 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;

HTMLHelper::_('bootstrap.offcanvas');
?>

<nav class="navbar navbar-expand-lg">
	<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbar<?php echo $module->id; ?>" aria-controls="navbar<?php echo $module->id; ?>" aria-expanded="false" aria-label="<?php echo Text::_('MOD_MENU_TOGGLE'); ?>">
		<span class="icon-menu" aria-hidden="true"></span>
	</button>
	<div class="offcanvas offcanvas-start" id="navbar<?php echo $module->id; ?>">
		<div class="offcanvas-header">
			<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
		</div>
		<div class="offcanvas-body">
			<?php require 'modules/mod_menu/tmpl/default.php'; ?>
		</div>
	</div>
</nav>

user.css

.offcanvas.show {
  background-color: var(--cassiopeia-color-primary);
  background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));
}
@media (min-width: 992px) {
  .offcanvas-start {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .offcanvas .metismenu.mod-menu .metismenu-item > ul {
    position: relative;
    width: 100%;
    margin-top: 1rem;
  }
  .offcanvas .metismenu.mod-menu .mm-collapse {
    background-color: transparent;
  }
  .offcanvas .metismenu.mod-menu .metismenu-item > a {
    color: #fff;
  }
}
.offcanvas-header > *:only-child {
  margin-left: auto;
}

try putting the offcanvas files in the parent Cassiopeia

Hi vivian,

using modulehelper to load the layout will allow for overrides.

I added to off-canvas line 14:

use Joomla\CMS\Helper\ModuleHelper;

and replaced line 27 require 'modules/mod_menu/tmpl/default.php'; with require ModuleHelper::getLayoutPath('mod_menu', 'default');

@fontanil @drmenzelit this fixes the issue you are experiencing.

The same goes for the metismenu. It just needs require ModuleHelper::getLayoutPath('mod_menu', 'dropdown-metismenu');

This way you don't need to duplicate the metismenu files.

And this one.

Thank you @TLWebdesign
The idea of child templates is that you don't need to duplicate anything, metismenu works on a child template without copying the files, so will offcanvas also work if the files are put into the parent template. In this way it is possible to create overrides on the child template.

True but my code makes sure both scenario’s work. Even if you plan to override them. Your code has a hard coded path in it requiring the files to be in the exact right spot.

Using the modulehelper layout path method makes sure it always works. I for instance like to keep this file in my child template because it is part of my custom codes. I don’t want to touch the cassiopeia template at all. Keep ecery override in one place.

Thanks Viviana, I understand.

My goal was to create the child template on a test site and copy only its files on the production site. It's why I added offcanvas files in the child folder.

Hi Viviana,
I would like the offcanvas window to open slowly, with a kind of transition effect. How can I achieve this?

@mariantanase so far I know the offcanvas has already a transition effect, maybe you need to play with the values

Unfortunately I didn't found anything on user.css. I think that the slowing effect can be achieved with jquery.

I mean in the css from Bootstrap, you can inspect the element in the browser... and jQuery for such an effect will be overkill...

... and jQuery for such an effect will be overkill...

Agree ! For this reason I want to avoid jquery.

I solve by adding on my user.css:

#navbar1{
	transition: 0.8s ease;
}

Hi - this works fine for me and I get the hamburger menu where I want it on mobile devices, thank you!
But on larger screens I get the menu running across the top of the screen, which I don't want (see attachment).
I've tried hiding the module using the .d-none class in the module class, but it's not working for me.
I'm developing the site locally at this point.
Has anyone any idea where I'm going wrong?

Thanks in advance ...

Off canvas mobile menu not closing with anchor links ;-(

Hi - this works fine for me and I get the hamburger menu where I want it on mobile devices, thank you! But on larger screens I get the menu running across the top of the screen, which I don't want (see attachment). I've tried hiding the module using the .d-none class in the module class, but it's not working for me. I'm developing the site locally at this point. Has anyone any idea where I'm going wrong?

Thanks in advance ...

If you want to have the hamburger menu always visible, you need to change the classes of the nav, probably remove navbar-expand-lg. Please check the bootstrap documentation
https://getbootstrap.com/docs/5.3/components/navbar/#offcanvas

Off canvas mobile menu not closing with anchor links ;-(

This is a generic example, please check the bootstrap documentation.

Hi Viviana - thanks for getting back to me. I'll check out the documentation :-)

Off canvas mobile menu not closing with anchor links ;-(

This is a generic example, please check the bootstrap documentation.

Hi Viviana, i've searched several forums, it seems to be an Offcanvas bug.

You can see the problem here > https://j4demo3.ltheme.com/joomla-one-page-templates/lt-recoric

Hi - this works fine for me and I get the hamburger menu where I want it on mobile devices, thank you! But on larger screens I get the menu running across the top of the screen, which I don't want (see attachment). I've tried hiding the module using the .d-none class in the module class, but it's not working for me. I'm developing the site locally at this point. Has anyone any idea where I'm going wrong?
Thanks in advance ...

If you want to have the hamburger menu always visible, you need to change the classes of the nav, probably remove navbar-expand-lg. Please check the bootstrap documentation https://getbootstrap.com/docs/5.3/components/navbar/#offcanvas

Hi Viviana - I'm afraid I'm still struggling with this. What I really need is to hide the top navbar completely on all except mobile phones. I'm afraid I'm a bit out of my depth here. Removing navbar-expand-lg has not worked for me.

@ianpanorton ok, I got it... you need to add the classes d-flex d-sm-none to the nav element, that will make it visible only on small devices.
https://getbootstrap.com/docs/5.3/utilities/display/

@ianpanorton ok, I got it... you need to add the classes d-flex d-sm-none to the nav element, that will make it visible only on small devices.
https://getbootstrap.com/docs/5.3/utilities/display/

I've got it now as well :-) Many thanks for your help Viviana...

@leetempest @mariantanase @TLWebdesign @woluweb @ianpanorton @robertaricci @fontanil @monicastewart
Thank you all for your questions and ideas. Now there is an improved version of the offcanvas menu with a little bit of explanation on my blog: https://www.dr-menzel-it.de/blog/offcanvas-menue-fuer-cassiopeia
It is in German, but I think a translation tool will help ;-)

Hi,
I'm using this code (and now the code on the blog page) and I have a problem with a vertical menu (sidebar-left).
I change the grid in the user.css to display the sidebar-left above the main component section. All works.
But once the content of the offcanvas is displayed, a click on a link opens the right page but don't close the menu. Is it a way to automatically close it? (the main menu in "menu" position closes well)
Thanks in advance!

Sorry,

It's a conflict with a JS script added in the index.php of the child template.
Removing the script solved the problem.
I hope the author of that script will find a solution.

Thank you for the code. It is very useful. Is there a way to insert my site's logo at the center top of your offcanvas menu and to wrap the wording of the sub-menu items that are currently flowing out offscreen on the right side of the container:

I do not want to make my offcanvas menu wider than the 66% screen width that it currently is.

Thank you for the code. It is very useful. Is there a way to insert my site's logo at the center top of your offcanvas menu and to wrap the wording of the sub-menu items that are currently flowing out offscreen on the right side of the container:

I do not want to make my offcanvas menu wider than the 66% screen width that it currently is.

Please check the last version of the offcanvas: https://gist.github.com/drmenzelit/152a1954d73bcbe126194965e43c97f4?permalink_comment_id=4529752#gistcomment-4529752

Check line-break or other possibilities in CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/line-break

Thank you for your off canvas menu code (using offcanvas.php) it works great! On the full screen I use this CSS to add an underline to active menu Item (/* Underline active Menu Item */ .container-header .mod-list li.active > a { text-decoration: underline #7ed956 3px; }
But I am unable to get it to work on the off canvas menu?
Any suggestions are appreciated. Thanks.

@JoomlaRookie you should check with the browser inspector (F12) the specificity of your css definition, probably it is something else overwriting it.

After using FireFox web development tools I could find no errors in my CSS that would cause the underline to active menu item not to appear on mobile devices.
Full Screen image:

Firefox Responsive Design Image:

And screenshot of menu on iPhone 12 iso 17.4:

No text decoration on iPhone. Any suggestions are appreciated. Thanks.

I was able to create a way of highlighting the active menu item by adding this to user.css:
@media (max-width: 991.98px){li.nav-item.current.active {color:#7ed956;} }
This allows offcanvas menu to change active link to different color and does not interfere with menu display on larger displays greater than 991.98px.