Last active
March 25, 2024 00:43
-
-
Save drmenzelit/152a1954d73bcbe126194965e43c97f4 to your computer and use it in GitHub Desktop.
Offcanvas Menu for Cassiopeia
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.