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

  1. In a child theme set $navbar-offcanvas-bg-color: #505050; $navbar-offcanvas-link-color: #fff; and
    keep $header-link-color at a dark color.
  2. Set navbar_responsive_type to offcanvas-end, compile, open the site below
    $navbar-collapse-responsive-break and open the menu.
  3. The menu links render in $header-link-color; the computed --bs-nav-link-color on
    .offcanvas .nav-link comes from the .page__header a.nav-link rule.

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

Command icon 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

pivica created an issue. See original summary.

pivica’s picture

Status: Active » Needs review

  • pivica committed 73d9c4c9 on 2.0.x
    fix: #3624688 Offcanvas link colors lose to the header link rule when...
pivica’s picture

Status: Needs review » Fixed

Merged.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.