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.

Breadcrumbs break onto 2 lines fixing the problem

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 is the HTML and CSS code for how to achieve this.


<!doctype html>
<meta charset="utf-8">
<title>Untitled Document</title>
  <link href="css/bootstrapv4.1.3.css" rel="stylesheet" type="text/css"> 
    <link href="css/style.css" rel="stylesheet" type="text/css"> 

     <nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Next Level</a></li>
    <li class="breadcrumb-item active" aria-current="page"><a href="/" title="Im a really long name and will break">Im a really long name and will break</a></li>
	<h1>Example for keeping breadcrumbs on same line</h1>
    <script src="js/jQueryv3.3.1.js" type="text/javascript"></script>
    <script src="js/bootstrapv4.1.3.js" type="text/javascript"></script>

CSS Code.

Now when we run the code again, we can see that the breadcrumbs no longer break into 2 lines like the image below shows.

/* CSS Document */
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  h1 {
    font-size: 0.9em;
    text-align: center; }

  .breadcrumb {
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }

  .breadcrumb .breadcrumb-item {
    display: inline; } }

/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
  h1 {
    font-size: 1.1em;
    text-align: left; } }


Fixed breadcrumbs css

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.