<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul id="bc1" class="breadcrumb"><span id="ellipses" style="display: inline;">...</span> <li><a href="http://moodle-test.warwick.ac.uk/my/">My home</a> <span class="divider"> <span class="accesshide "><span class="arrow_text">/</span> </span><span class="arrow sep">►</span> </span> </li> <li><span tabindex="0">Site administration</span> <span class="divider"> <span class="accesshide "><span class="arrow_text">/</span> </span><span class="arrow sep">►</span> </span> </li> <li><span tabindex="0">Courses</span> <span class="divider"> <span class="accesshide "><span class="arrow_text">/</span> </span><span class="arrow sep">►</span> </span> </li> <li><a href="http://moodle-test.warwick.ac.uk/course/management.php">Manage courses and categories</a> <span class="divider"> <span class="accesshide "><span class="arrow_text">/</span> </span><span class="arrow sep">►</span> </span> </li> <li><a href="http://moodle-test.warwick.ac.uk/course/management.php?categoryid=1">Miscellaneous</a> <span class="divider"> <span class="accesshide "><span class="arrow_text">/</span> </span><span class="arrow sep">►</span> </span> </li> <li><span tabindex="0">Physics Webwork Test</span></li> </ul>

/* The responsive part */ .breadcrumb > li { /* With less: .text-overflow(); */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .breadcrumb > *:nth-child(n+1) { display:none; } .invisible{display:none;} /* === For phones =================================== */ @media (max-width: 767px) { .breadcrumb > *:nth-last-child(-n+2) { display:inline; } .breadcrumb > * { max-width: 60px; } } /* === For tablets ================================== */ @media (min-width: 768px) and (max-width:991px) { .breadcrumb > *:nth-last-child(-n+4) { display:inline; } .breadcrumb > * { max-width: 100px; } } /* === For desktops ================================== */ @media (min-width: 992px) { .breadcrumb > *:nth-last-child(-n+6) { display:inline; } .breadcrumb > * { max-width: 170px; } }

$(document).ready(function() { toggle_ellipses(); /***** Responsive breadcrumbs *****/ $(window).resize(function() { toggle_ellipses(); }); /***** Responsive breadcrumbs ******/ }); function toggle_ellipses() { var ellipses1 = $("#ellipses"); var howlong = $("#bc1 li:hidden").length; if ($("#bc1 li:hidden").length > 1) { ellipses1.show(); console.log("length: " + howlong + " => show") } else { ellipses1.hide(); console.log("length: " + howlong + " => hide") } }