NavBar Rounded Corner

HTML

<link href='https://fonts.googleapis.com/css?family=Strait' rel='stylesheet' type='text/css'>

<div class="menu-container">
      
  <div class="nav">
      <div class="settings"></div>
  </div>
  
  <div class="menu">
      <ul>
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/4JPrK.png"><p>Search</p></a></li>
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/jHwHy.png"><p>Upload</p></a></li>
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/Gyusy.png"><p>Location</p></a></li>
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/mbWpc.png"><p>Contacts</p></a></li>
      </ul>
  </div>
  
</div>

CSS

/*///////////////Created by Ryan Bishop.//////////////////// 
Check out more of my work at: http://dribbble.com/RyanBishop 
---------------------------OR-------------------------------
------------Follow me on twitter: @abletroner---------------
//////////////////////////////////////////////////////////*/

* {
	margin: 0;
	padding: 0;
}

body {
 background-color: #a3cabd;
}

.menu-container {
  display: block;
  position: relative;
  width: 300px;
  background-color: #f3f0ef;
  margin: 5% auto 0;
  padding: 0;
  border-radius:5px;
  box-shadow:  inset 0 0 1px rgba(255,255,255,1);
  box-shadow:  5px 5px 15px 1px rgba(0,0,0,0.1);
}

.nav{
  background-color: #ed6b3a;
  height:40px;
  border-radius:5px 5px 0 0;
}

.settings {
  height:20px;
  float:right;
  background-image:url(http://i.imgur.com/CLs7u.png);
  width:20px;
  margin:10px;
}

.menu ul {
  list-style:none;
}

.menu ul li {
  border-top:1px solid rgba(0,0,0,0.1);
  padding:11px 10px;
  box-shadow:inset 0 1px 1px #fff;
  text-indent:10px;
  }

.menu ul li a {
  font-size:14px;
  color:#a4a3a3;
  font-family: 'Strait', sans-serif;
  font-size:14px;
  text-decoration:none;
  text-shadow: 1px 1px 1px #fff;
}

.menu ul li img {
  float:left;
  margin:-2px 0 0 0;
}

.menu ul li:hover {
  border-left:3px solid #ed6b3a;
  background-color:rgba(0,0,0,0.02);
}

JavaScript

NavBar Rounded Corner

Settings

HTML Preprocessors (Coming Soon)

CSS Preprocessors (Coming Soon)

JS Preprocessors (Coming Soon)

NavBar Rounded Corner

Settings

HTML Preprocessors (Coming Soon)

CSS Preprocessors (Coming Soon)

JS Preprocessors (Coming Soon)

Share Code