CSS Snippet for Semi-Visible Breadcrumb

Share & showcase
1

CSS Snippet for Semi-Visible Breadcrumb

I prefer not to have to hover to see where my current file is. I have a few projects with “Incoming” notes, etc.

So here’s one that is .3 opacity, until it’s hovered.

.view-header-title-container.mod-at-start.mod-fade {
    opacity: 0.3 !important; /* Keeps the breadcrumb always visible but subtle */
    display: flex !important; /* Ensures the container layout remains intact */
    transition: opacity 0.2s ease-in-out; /* Smooth transition if you hover or adjust */
}

.view-header-title-container.mod-at-start.mod-fade:hover {
    opacity: 1 !important; /* Makes it fully visible when hovered */
}