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;
}

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.