Breadcrumbs break into 2 lines on small screens

Breadcrumb navigation can significantly enhance the way users find their way around a site; they should help let the user know where they are are in the structure of your website.

Problem is sometimes if you have a long name in your breadcrumb, it can break into two lines like the image below shows.

Broken breadcrumbs

So how can we fix this problem, we could make the same shorter, but sometimes that is not an option, or we can use CSS to keep the breadcrumbs on the line and stop them from breaking into two lines.

As Bootstrap is one of the most popular frameworks for CSS, this example is designed with Bootstrap 4.

Below are the HTML and CSS code for how to achieve this.

The code has now fixed the problem; I hope you found this short blog helpful on how to stop breadcrumbs from breaking into two lines on mobile devices.

Leave a comment