Fix main menu link color in header and back-to-top functionality

Main menu links in the header now explicitly use
--mainmenu-nav-link-color via .container-header .nav-link
selector, preventing the generic --nav-link-color from bleeding
through when variables resolve to the body link color.

Back-to-top link:
- Switch icon from IcoMoon (icon-arrow-up) to Font Awesome
  (fa-solid fa-arrow-up) for consistency with the rest of the
  template.
- Add id="top" to the header element so the href="#top" fallback
  works even when JavaScript is disabled.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-04 14:24:23 -05:00
parent a767f97995
commit 4801571b53
2 changed files with 12 additions and 3 deletions

View File

@@ -367,7 +367,7 @@ $wa->useScript('user.js'); // js/user.js
<!-- End Google Analytics --> <!-- End Google Analytics -->
<?php endif; ?> <?php endif; ?>
<header class="header container-header full-width<?php echo $stickyHeader ? ' ' . $stickyHeader : ''; ?>" role="banner"> <header id="top" class="header container-header full-width<?php echo $stickyHeader ? ' ' . $stickyHeader : ''; ?>" role="banner">
<?php if ($this->countModules('topbar')) : ?> <?php if ($this->countModules('topbar')) : ?>
<div class="container-topbar"> <div class="container-topbar">
@@ -523,7 +523,7 @@ $wa->useScript('user.js'); // js/user.js
<?php if ($this->params->get('backTop') == 1) : ?> <?php if ($this->params->get('backTop') == 1) : ?>
<a href="#top" id="back-top" class="back-to-top-link" aria-label="<?php echo Text::_('TPL_MOKOCASSIOPEIA_BACKTOTOP'); ?>"> <a href="#top" id="back-top" class="back-to-top-link" aria-label="<?php echo Text::_('TPL_MOKOCASSIOPEIA_BACKTOTOP'); ?>">
<span class="icon-arrow-up icon-fw" aria-hidden="true"></span> <span class="fa-solid fa-arrow-up" aria-hidden="true"></span>
</a> </a>
<?php endif; ?> <?php endif; ?>

View File

@@ -14360,12 +14360,21 @@ li.current a {
} }
.container-header .mod-menu>li>a, .container-header .mod-menu>li>a,
.container-header .mod-menu>li>span { .container-header .mod-menu>li>span,
.container-header .nav-link,
.container-header .mod-menu-main__link {
position: relative; position: relative;
color: var(--mainmenu-nav-link-color, #fff); color: var(--mainmenu-nav-link-color, #fff);
text-decoration: none; text-decoration: none;
} }
.container-header .nav-link:hover,
.container-header .nav-link:focus,
.container-header .mod-menu-main__link:hover,
.container-header .mod-menu-main__link:focus {
color: var(--link-hover-color, #c3d6ff);
}
@media (min-width: 992px) { @media (min-width: 992px) {
.container-header .mod-menu>li::after { .container-header .mod-menu>li::after {
position: absolute; position: absolute;