Problem/Motivation

Breadcrumps skewed

The icon looks fine, but the text right next to it is skewed.

Steps to reproduce

Go to https://fldcevent-platform-september.ddev.site/user/1 and look at the path.
web/themes/contrib/event_horizon/components/site-header/site-header.css

ol.breadcrumb__list li {
  display: inline-block;
  transform: skewX(-30deg);
  border-left: 2px solid #ddd;
  padding-left: 1rem;
  margin-right: 1rem;
}

Proposed resolution

ol.breadcrumb__list li:first-of-type {
  display: inline-block;
  transform: skewX(-30deg);
  border-left: 2px solid #ddd;
  padding-left: 1rem;
  margin-right: 1rem;
}

ol.breadcrumb__list li {
  display: inline-block;
  border-left: 2px solid #ddd;
  padding-left: 1rem;
  margin-right: 1rem;
}

fldcevent_platform-september/web/themes/contrib/event_horizon/components/site-header/site-header.scss

after effect

Remaining tasks

Swap the code and test that it does not step on something else.

CommentFileSizeAuthor
#3 Screenshot 2025-09-11 at 11.17.55 AM.png31.71 KBbernardm28
Screenshot 2025-09-11 at 10.57.32 AM.png35.84 KBbernardm28
Screenshot 2025-09-11 at 10.45.10 AM.png20.78 KBbernardm28

Issue fork event_horizon-3546235

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

bernardm28 created an issue. See original summary.

bernardm28’s picture

bernardm28 commented
Title: Breadcrumbs paths are skewed » Breadcrumbs text paths are skewed
bernardm28’s picture

bernardm28 commented
StatusFileSize
new Screenshot 2025-09-11 at 11.17.55 AM.png31.71 KB

It seems that these changes are also needed to avoid this.

path is skewed over

instead of this code on web/themes/contrib/event_horizon/components/site-header/site-header.scss

ol.breadcrumb__list li a {
  transform: skewX(30deg);
  display: inline-block;
}

switch it to this.

ol.breadcrumb__list li a {
  display: inline-block;
}

And then add the following to this CSS class.

ol.breadcrumb__list li:first-child a {
transform: skewX(30deg);
}

Only local images are allowed.

mandclu’s picture

mandclu commented
Version: 1.0.x-dev » 2.0.x-dev

mandclu opened merge request !46

  • mandclu committed acbed016 on 2.0.x 
    task: #3546235 Breadcrumbs text paths are skewed

By: bernardm28
By:...
mandclu’s picture

mandclu commented
Status: Active » Fixed

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.