Before:

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 getbootstrap.com/getting-started/
  3. Open Stylebot and click the "Edit CSS" button
  4. Paste in the following CSS and click Save:

/***********************************************************
   Go to http://getbootstrap.com/getting-started/
   Then try paste this CSS into Stylebot Chrome extension: 
***********************************************************/

.back-to-top {
    border: 1px solid #b7dbff;
    border-radius: 5px;
    color: dodgerblue;
    padding: 10px;
}

.back-to-top:before {
    content: "⇧";
    font-size: 150%;
    line-height: 1px;
    padding-right: 6px;
}

li.active > a {
    background-color: #eaf5ff;
}


Tags

html-css navigation redesign-case


Related posts