Add Breadcrumbs on Mobile View via CSS

Service: Hoop.la

Add Breadcrumbs on Mobile View via CSS

Service: Hoop.la

Want to add breadcrumbs to the mobile view for your site? We've come up with some custom CSS (thanks, @Brian Lenz!) that you can use to show the "closest" two levels of the forum breadcrumbs on mobile devices. 

You would insert this CSS in the the Custom CSS field in your Display Settings:

.breadcrumbs-wrapper.hide-for-small-only { display: inherit !important; }
@media only screen and (max-width: 40.0625em) {
.h-page-for-FORUM nav.breadcrumbs li.breadcrumb { display: none; }

.h-page-for-FORUM nav.breadcrumbs li.breadcrumb:last-child
, .h-page-for-FORUM nav.breadcrumbs li.breadcrumb:nth-last-child(2)
{ display: list-item; }

.h-page-for-FORUM nav.breadcrumbs li.breadcrumb:nth-last-child(2):before { display:none; }
}

You might want to add a description at the beginning of the code so that you remember what that is for, like this:

/*add breadcrumbs to mobile view*/
Original Post
Likes (2)
neilST

Activity Stream

There has been no activity on this support topic yet.

Add Reply

×
×
×
×