-
-
Save drmenzelit/152a1954d73bcbe126194965e43c97f4 to your computer and use it in GitHub Desktop.
<?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> |
.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; | |
} |
@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.
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.