How TO - Mobile Navigation Menu in cassiopeia Joomla Template

Step 1: Copy required files

First of all we will copy core menu module template files from modules/mod_menu/tmpl/default.php to our template to templates/cassiopeia/html/mod_menu/dropdown-metismenu.php and edit its content to like that.

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   (C) 2020 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\Helper\ModuleHelper;
use Joomla\Utilities\ArrayHelper;

/** @var \Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
$wa->registerAndUseScript('metismenu', 'media/templates/site/cassiopeia/js/mod_menu/menu-metismenu.min.js', [], ['defer' => true], ['metismenujs']);

$attributes          = [];
$attributes['class'] = 'mod-menu mod-menu_dropdown-metismenu metismenu mod-list ' . $class_sfx;

if ($tagId = $params->get('tag_id', '')) {
    $attributes['id'] = $tagId;
}

$start = (int) $params->get('startLevel', 1);

?>
<ul <?php echo ArrayHelper::toString($attributes); ?>>
<?php foreach ($list as $i => $item) {
    // Skip sub-menu items if they are set to be hidden in the module's options
    if (!$showAll && $item->level > $start) {
        continue;
    }

    $itemParams = $item->getParams();
    $class      = [];
    $class[]    = 'metismenu-item item-' . $item->id . ' level-' . ($item->level - $start + 1);

    if ($item->id == $default_id) {
        $class[] = 'default';
    }

    if ($item->id == $active_id || ($item->type === 'alias' && $itemParams->get('aliasoptions') == $active_id)) {
        $class[] = 'current';
    }

    if (in_array($item->id, $path)) {
        $class[] = 'active';
    } elseif ($item->type === 'alias') {
        $aliasToId = $itemParams->get('aliasoptions');

        if (count($path) > 0 && $aliasToId == $path[count($path) - 1]) {
            $class[] = 'active';
        } elseif (in_array($aliasToId, $path)) {
            $class[] = 'alias-parent-active';
        }
    }

    if ($item->type === 'separator') {
        $class[] = 'divider';
    }

    if ($showAll) {
        if ($item->deeper) {
            $class[] = 'deeper';
        }

        if ($item->parent) {
            $class[] = 'parent';
        }
    }

    echo '<li class="' . implode(' ', $class) . '">';

    switch ($item->type) :
        case 'separator':
        case 'component':
        case 'heading':
        case 'url':
            require ModuleHelper::getLayoutPath('mod_menu', 'dropdown-metismenu_' . $item->type);
            break;

        default:
            require ModuleHelper::getLayoutPath('mod_menu', 'dropdown-metismenu_url');
    endswitch;

    switch (true) :
        // The next item is deeper.
        case $showAll && $item->deeper:
            echo '<ul class="mm-collapse">';
            break;

        // The next item is shallower.
        case $item->shallower:
            echo '</li>';
            echo str_repeat('</ul></li>', $item->level_diff);
            break;

        // The next item is on the same level.
        default:
            echo '</li>';
            break;
    endswitch;
}
?>

<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Top Navigation Menu -->
<div class="topnav">
  <a href="#home" class="active">&nbsp;&nbsp;&nbsp;</a>
  <!-- Navigation links (hidden by default) -->
  <div id="myLinks">
    <a href="/component/contact/contact/1-contact?Itemid=102">Contact</a>
    <a href="/component/content/category?layout=blog&Itemid=151">Blog</a>
    <a href="/component/content/article/1-?Itemid=103">About</a>
  </div>
  <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<li class="metismenu-item item-102 level-1">
	<a href="/component/contact/contact/1-contact?Itemid=102">Contact</a>
</li>
<li class="metismenu-item item-102 level-1">
    <a href="/component/content/category?layout=blog&Itemid=151">Blog</a>
</li>

<li class="metismenu-item item-103 level-1">
	<a href="/component/content/article/1-?Itemid=103">About</a>
</li>
</ul>