Problem/Motivation
sass/components/partials/_navbar-offcanvas.scss sets the offcanvas link colors inside the
responsive breakpoint with the selectors .offcanvas a:not([class]), .offcanvas a.ext and
.offcanvas .nav-link (specificity 0,2,0 and 0,2,1). sass/layout/partials/_header.scss
sets the header link colors with .page__header a.nav-link (0,2,1). The navbar offcanvas is rendered
inside .page__header, so the header rule applies to the menu links in the open offcanvas and the
$navbar-offcanvas-link-* colors are never used for .nav-link.
The bug is invisible while $navbar-offcanvas-link-color, -hover-color and
-active-color keep their defaults, which are the $header-link-* values. A child theme
that gives the offcanvas its own palette (for example a dark panel with light links) gets the header link color on
a dark background.
Steps to reproduce
- In a child theme set
$navbar-offcanvas-bg-color: #505050; $navbar-offcanvas-link-color: #fff;and
keep$header-link-colorat a dark color. - Set
navbar_responsive_typetooffcanvas-end, compile, open the site below
$navbar-collapse-responsive-breakand open the menu. - The menu links render in
$header-link-color; the computed--bs-nav-link-coloron
.offcanvas .nav-linkcomes from the.page__header a.nav-linkrule.
Proposed resolution
Scope the offcanvas link rules to the header so they outrank the header rule regardless of stylesheet order:
@include media-responsive-breakpoint-down($navbar-collapse-responsive-break) { - .offcanvas { + .page__header .offcanvas { // Generic links. a:not([class]), a.ext {
The rest of the block (.btn-link, .dropdown-menu, .navbar-nav,
.nav-links) gains the same scope, which is correct for the navbar offcanvas. Alternative considered:
.offcanvas a.nav-link on the nav-link rule only; that ties with the header rule at (0,2,1) and depends
on load order, so it is not enough.
Remaining tasks
- Apply the change and recompile bs_base CSS.
- Child themes that worked around it (a repeated
style-nav-link()call under
.page__header .offcanvas .nav-link) can drop the workaround after updating.
Issue fork bs_base-3624688
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
pivica commentedComment #5
pivica commentedMerged.