Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Shorten's breadcrumb to only show current & parent page when on mobile & tablet.
/* Shorten Breadcrumbs on Tablet and Smartphones */
/* Coded by Dan Jones */
@media only screen and (max-width: 1024px) {
ul.sm-breadcrumb > li.sm-breadcrumb-item {
display:none;
}
ul.sm-breadcrumb li:nth-child(1), ul.sm-breadcrumb li:nth-child(2), ul.sm-breadcrumb li:nth-last-child(1), ul.sm-breadcrumb li:nth-last-child(2), ul.sm-breadcrumb li:nth-last-child(3), ul.sm-breadcrumb li:nth-last-child(4) {
display:inline-block;
}
ul.sm-breadcrumb li:nth-child(2)::after {
content:"...";
}
ul.sm-breadcrumb li:nth-child(2):nth-last-child(2)::after, ul.sm-breadcrumb li:nth-child(2):nth-last-child(4)::after {
content:"";
}
}
@media only screen and (max-width: 640px) {
ul.sm-breadcrumb > li.sm-breadcrumb-item {
display:none;
}
ul.sm-breadcrumb li:nth-child(1), ul.sm-breadcrumb li:nth-child(2), ul.sm-breadcrumb li:nth-last-child(1), ul.sm-breadcrumb li:nth-last-child(2) {
display:inline-block;
}
ul.sm-breadcrumb li:nth-child(2):nth-last-child(2)::after {
content:"";
}
ul.sm-breadcrumb li:nth-child(2):not(:nth-last-child(2))::after {
content:"...";
}
ul.sm-breadcrumb li h1 {
font-size:14px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.