Breadcrumb Padding Issue

Created on 27 September 2019, almost 5 years ago
Updated 2 August 2024, about 1 month ago

When you have breadcrumbs which don't have links for each element (i.e showing the current page as the last element, with custom code or the menu_breadcrumb module) the last element does not get any left padding after the left "/" separator. Which looks really odd!

Here was a quick css fix I implemented which may help others.

.breadcrumb a {
    padding: 0;
}

.breadcrumb li + li::before {
    /* existing bulma css
    color: #b5b5b5;
    content: "/";
    */
    /* new css */
    padding: 0 0.75em;
}

This removes the padding from the link and adds it both sides of the separator.
For touch devices, it is preferable to have more padding around an A link element, as it makes it easier to click, but I couldn't find a way to make it space correctly when the last element wasn't a link, and still keep the padding on the A.

๐Ÿ› Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom medden

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

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024