SkipTo CSS interferes with the styling of core

Created on 28 March 2025, 8 days ago

Problem/Motivation

It looks like the CSS SkipTo.js ships with is causing issues, in the way it is currently added to the module and the site in consequence, the look and behavior of several elements in Claro is off after installing Skipto. Three examples but there are probably several more

  • The styling of breadcrumbs changes
  • The outlines of menu items in the navigation sidebar are chopped up so only the edges are still visible
  • The links of field type buttons in the add field dialog modal in 11.x are getting underlined on hover

Steps to reproduce

  • Install SkipTo on an install of 11.x
  • Check the breadcrumb nav
  • Hover over about menu items in the navigation sidebar
  • Add a field on a content type and hover over one button in the add field dialog modal

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

2.0

Component

Code

Created by

🇩🇪Germany rkoller Nürnberg, Germany

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @rkoller
  • 🇩🇪Germany rkoller Nürnberg, Germany
  • 🇩🇪Germany rkoller Nürnberg, Germany

    I have to add I also noticed two more issues, but those were only one time and i was unable to reproduce so far, but i'll add them in the context of this issue cuz the "might" be at least related as well:

    • Installing the plus suite with layout builder plus, navigation plus, and edit plus alongside skipto made the topbar not showing up and the edit button in the navigation sidebar was shown neither. after several installs and uninstalls both coexisted but it felt flaky.
    • the skipto button and the expanded menu collided somehow with status messages and the display of the two in combination was off.
  • Merge request !3remove skipto.css from skipto.libraries.yml → (Merged) created by rkoller
  • 🇩🇪Germany rkoller Nürnberg, Germany

    Turns out the skipto.css file was unnecessary to add and that additional css was causing all those issue. the three issues listed in the issue summary as well as the problems with the plus suite are solved with MR3. i was only unable to reproduce the problem with the status messages so far but odds are it might be solved as well.

  • 🇩🇪Germany rkoller Nürnberg, Germany

    @grienauer noted that aside removing the css asset from the libraries.yml, it "might be" a good idea to also remove the css assets in the first place as well. ^^ completely forgot about that detail.

  • First commit to issue fork.
  • 🇬🇧United Kingdom the_g_bomb

    The patch applies, and the CSS files are removed.
    The styling, as described, looks to be addressed.

  • 🇬🇧United Kingdom the_g_bomb
Production build 0.71.5 2024