When the viewport width is small enough, the links in the nav bar are hidden and a button to expand the list is shown. Bootstrap includes a jQuery plugin to provide the interaction needed when you click the nav expander button and the nav items animate into view.
:target pseudo-class represents the unique element, if any, with an ID matching the hash part of the URL of the document. So
http://example.com/#some-id would match the imaginary
We include an ID on the body element of “expanded” and include a
.btn.btn-navbar link to
#expanded. This means we can change any child of the body using the CSS selector
#expanded:target. The collapsible nav includes a height of zero by default so we just need to update the
This lets you expand the nav but provides no easy way of contracting it (other than the back button). We need to introduce a second
.btn-navbar linking to
#. We can again use
:target to show and hide the correct buttons
The main drawback of this approach is that it will add to your browser history. Instead of clicking back and going to the previous page it will scroll to the top of the current page and contract the nav, requiring you to hit back again to actually go to the last page. This isn’t really a problem for us on labs - more an inconvenience.