In the Barricade style guide the navigation options are rather ambigious on small screens (see "Before" screenshot below): It is hard to tell which is the current option and if the options are hierarchically organized or at the same level.


The original design before visual treatments

After quick redesign:

The design after visual treatments

Try it out yourself in Google Chrome:

  1. Get the Stylebot Chrome extension
  2. Go to
  3. Open Stylebot and click the "Edit CSS" button
  4. Paste in the following CSS and click Save
  5. Resize the browser window to mimic a smartphone screen

   Created by Andreas G. Ibsen,
   Go to
   Then try paste this CSS into Stylebot Chrome extension: 

@media screen and (max-width: 60em) {
  .styleguide .sidebar ul.side-nav .heading {    
    outline: 1px solid #dfdfdf;
  .styleguide .sidebar ul.side-nav a {    
    background-color: #f4f5f8;

@media screen and (max-width: 40em) {
  body .styleguide .sidebar ul.side-nav li.heading, 
  body .styleguide .sidebar ul.side-nav li.heading:hover {    
    background-color: #dfdfdf;    /*#34495E;*/    
    color: #7c939d;    
    outline: 2px solid #F4F5F8;
  body .styleguide .sidebar ul.side-nav li.heading a {    
    color: #333;
  body .styleguide .sidebar ul.side-nav a {    
    background-color: #f4f5f8;    
    color: #7c939d;
  .side-nav .active > a::before, .side-nav .active > a::after {    
    opacity: .35;    
    content: "●";    
    color: #008cba;
  .side-nav .active > a::before {    
    padding-right: .25em;
  .side-nav .active > a::after {    
    padding-left: .25em;


html-css navigation redesign-case

Related posts