Style the nav bar as hanging tabs

Here we'll style the nav bar as a solid thick colored line, with the menu items hanging from it as tabs with rounded corners:

To create the bar and hanging tabs, we add this nav style to our Custom CSS:

#nav, #nav-inner, .nav-list { background-color: #fff; border: 0; } #nav { border-top: 5px solid #D10000; } #nav a:link,a:visited { border-radius: 0 0 8px 8px; padding:0px 15px; } #nav ul { margin:0; margin-left: 20px; padding: 0; } #nav li{ text-transform:uppercase; } #nav a { float: left; font-weight: bold; color: #000; margin: 0 5px 0 0; /* Margin between each menu item */ background-color: #eee; /* Default tab color */ } #nav a:hover { background-color: #D10000; color: #fff; }

To change the default tab color, replace the background-color in #nav a (it is currently set to #eee).

To change the highlight color, replace the two instances where the red (#D10000) color is set - in the #nav border and in the a:hover background-color.

---

Text Only Banner

You can also easily use this nav bar with a text-only banner (no image). Here we have added the code for that to our Custom CSS as well:

---

Growing Tabs

You can make the tabs grow when hovered, if you'd like:

This is accomplished by adding extra hover padding to the main code above:

#nav a:hover { padding-top: 12px; padding-bottom: 3px; }

---

No Tabs

You can also remove the tabs for a more open look:

Set the background-color on the links to the same color as your background to make the tabs disappear. In this case we're changing the default color of the tabs from gray (#eee) to white (#fff):

#nav a { background-color: #fff; /* Default tab color */ }

---

Top

We can also move the hanging tabs to the top:

After adding the code to move the nav bar to the top of the page, we'll use the following code as well to align the tabs to the right side of the content area, add some margin space on the right side of the menu, and move up the banner text a little:

#nav a { float: right; } #nav ul { margin-right: 60px; } #banner, #pagebody { top: 10px; }

(inspiration from Dynamic Drive)