Question

I need to make a breadcrumb nav that could be quite long, that shrinks with the window for small screens but the links inside it disappear to the left ie the most recently visited pages are always the ones in view, percentage width in CSS not working so was thinking JQuery.

Answer 1

Simply use a combination of direction: rtl; and overflow: hidden;. For example, try this example code (demo).

HTML

<div id="breadcrumb">
  <a href="#">Home</a> &gt;
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Parent</a> &gt; 
  Current Page
</div>

CSS

#breadcrumb {
  overflow: hidden;
  direction: rtl;
  white-space: nowrap; /* keeps everything on one line */
  width: 50%; /* change this to whatever you want (for example, 300px) */
}