Problem/Motivation

It looks like the Navigation module CSS reset in #3511280: Front-end theme styles can bleed into Navigation broke the block edit contextual menus in the navigation sidebar. I reached the conclusion because commenting out / disabling the all: revert; in that CSS restored the contextual menus display.

I'm calling this Major because when the pointer is moved to the menu to click an option (such as "Configure"), the layout shifts to hide the menu and it's not obvious that it's possible to scroll down.

There is the shadow at the bottom of the section, but it's subtle and isn't visible in forced-colors mode. I didn't see it at first myself.

Here are a couple of screenshots. The second is when the pointer is over the menu. It includes the entire section and shows how the menu options get hidden.

Screenshot of broken contextual menu
Screenshot of broken contextual menu in "hover" state

Steps to reproduce

  1. Install with standard profile.
  2. Log in as an admin.
  3. Enable the Navigation module.
  4. Navigate to /admin/config/user-interface/navigation-block.
  5. Ensure that the "desktop" version of the navigation sidebar is visible and expanded (in wide mode).
  6. Click the "Enable edit mode" button.
  7. Move the pointer over the top section of the navigation sidebar.

Proposed resolution

Fix the contextual module CSS per the change record for #3511280: Front-end theme styles can bleed into Navigation.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#15 Screenshot 2026-01-27 at 11.59.01 AM.png83.02 KBgodotislate
Screenshot 2025-12-30 at 4.01.35 PM.png33.51 KBkentr
Screenshot 2025-12-30 at 4.01.25 PM.png33.49 KBkentr

Issue fork drupal-3565213

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:

About issue forks

Comments

kentr created an issue. See original summary.

kentr’s picture

kentr commented
Issue summary: View changes
kentr’s picture

kentr commented
Issue summary: View changes
kentr’s picture

kentr commented
Issue summary: View changes
kentr’s picture

kentr commented

A quick and dirty experiment indicates that using the specificity hack outlined in the change record does work.

Here's what I have in devtools. It might make sense to nest the entire contents of each contextual CSS file inside one instance of the specificity hack per file.

:is(#extra-specificity-hack, .contextual-region) {

  position: relative;
  
  .contextual {
    position: absolute;
    z-index: 500;
    top: 6px;
    right: 0; /* LTR */ 
  }

  .contextual .trigger:focus {
    /* Override the .focusable position: static */
    position: relative !important;
  }
  .contextual-links {
    display: none;
  }
  .contextual.open .contextual-links {
    display: block;
  }

  .contextual-links {
    position: relative;
    top: -1px;
    right: 6px; /* LTR */
    float: right; /* LTR */
    clear: both;
    margin: 0;
    padding: 0.25em 0;
    text-align: left; /* LTR */
    white-space: nowrap;
    border: 1px solid #ccc;
    border-radius: 4px 0 4px 4px; /* LTR */
    background-color: #fff;
  }

  .trigger {
    /* Override the .focusable height: auto */
    width: 26px !important;
    /* Override the .focusable height: auto */
    height: 26px !important;
    text-indent: -9999px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23bebebe' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23bebebe' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
  }

  .trigger:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23787878' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23787878' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
  }

  .trigger:focus {
    outline: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%235181C6' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%235181C6' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%235181C6' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
  }

  
}
catch’s picture

catch
he/him
Primary language English
commented
Category: Task » Bug report
kentr’s picture

kentr commented

Any change here should also be tested with Gin to prevent overriding Gin's CSS like in #3560487: Gin Top Bar styling is fully gone in 11.3.x.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Related issues: +#3568847: responsive_preview_navigation topbar icons broken by admin-reset-styles.css (Navigation core module)

Here's another effect: https://www.drupal.org/project/1828986/issues/3568847

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

finnsky made their first commit to this issue’s fork.

finnsky’s picture

finnsky commented

I added a softer reset using :where() as it was before

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:where

---

In general, I think this race will never end.

If we count the number of CSS properties that can be added to links and multiply them by the number of components that can be added to the Navigation, we get an infinite number of problems that we will have to solve. And increasing specificity doesn't help much here.

---

Therefore, it seems that the only normal solution will be to use fully encapsulated web components.
https://www.drupal.org/project/drupal/issues/3534298

finnsky opened merge request !14511

finnsky’s picture

finnsky commented
Status: Active » Needs review
finnsky’s picture

finnsky commented
Component: contextual.module » navigation.module

I think the problem here is not with contextual links, but with the navigation module.

godotislate’s picture

godotislate
he/him
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Screenshot 2026-01-27 at 11.59.01 AM.png83.02 KB

Test the MR and the the contextual links look correct now:

Screenshot of navigation block edit page

I also tested for regression from #3511280: Front-end theme styles can bleed into Navigation, but adding this rule to Umami base.css did not seem to leak into navigation:

button:hover,
input[type="submit"]:hover {
  background-color: red;
}

I'm RTBC +1, but reading up on :where on MDN, I don't know if the lowered specificity might be vulnerable to certain kinds of FE theme CSS rules leaking in, though I have not been able to cause that without more specific rules like:

.contextual button:hover,
input[type="submit"]:hover {
  background-color: red;
}

  • lauriii committed fb9afe34 on main 
    fix: #3565213 Adjust contextual CSS for navigation module reset CSS

By...

  • lauriii committed e6c9f0ab on 11.x 
    fix: #3565213 Adjust contextual CSS for navigation module reset CSS

By...

  • lauriii committed e30f6f84 on 11.3.x 
    fix: #3565213 Adjust contextual CSS for navigation module reset CSS

By...

lauriii closed merge request !14511

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Fixed

Committed! 🚀 Thank you everyone!

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.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.