NamiNavi - Sleek, stylish, fat & flat pure CSS3 navigation bar
NamiNavi is a made-by-yours-truly, stylish pure CSS3 menubar. It uses no images, is easy to make responsive and it looks cool as heck. I ripped it off from one of my Wordpress themes for peeps to use, since web should be beautiful.
Font: Estrangelo Edessa
Colors: #ec462c, #1c1c1c, #2d2d2d, #cccccc, #ffffff
CSS:
#top-navigation {
clear: left;
border-top: 6px solid #4d4d4d;
background-color: #1c1c1c;
width: 100%;
}
.menu-button {
font-family: 'Estrangelo Edessa', Arial, sans-serif;
font-size: 22px;
margin-bottom: -3px;
-webkit-font-smoothing: antialiased;
background-color: #2d2d2d;
text-transform: uppercase;
width: 200px;
height: 54px;
text-align: center;
vertical-align: middle;
line-height: 55px;
}
.current-menu-item {
border-top: 6px solid #ec462c;
margin-top: -6px;
z-index: 1;
}
HTML:
<div id="top-navigation">
<nav id="top-menu-nav">
<ul id="top-menu" class="nav">
<li id="menu-item-274" class="menu-button current-menu-item"><a href="#">Home</a></li>
<li id="menu-item-237" class="menu-button"><a href="#">About Us</a></li>
<li id="menu-item-236" class="menu-button"><a href="#">Download</a></li>
</ul> </nav>
INSTRUCTIONS:
Embed CSS on your menu elements. Wrap the navigation in "top-navigation" div. Remember to either embed 'Estrangelo Edessa' as a web font or replace it with another font of your choice. The menu is easy to make responsive: using media query, you can simply adjust the menu to "clear: right;" which will make it stack down.