Top Navigation Customization

Here are some classes that used to style the top navigation. This code are used for one color navigation menu.

.s4-tn{ background-color:#8dc63f; padding:0px; margin:0px!important; width:960px!important; }

/* Global navigation */

.s4-tn li.static > .menu-item{ color:#fff; white-space:nowrap; border:1px solid transparent; padding:10px 15px; line-height:12px; height:15px; font-size:12px; font-weight:bold; }

/* Hover */

.s4-tn li.static > a:hover{ background:url(“/_layouts/Images/selbg.png”) repeat-x left top; color:#000; text-decoration:none; }

/* Selected */

.s4-tn a.selected { background:url(“/_layouts/images/selbg.png”) repeat-x left top; background-color:#8dc63f; color:black!important; text-decoration:none; border:1px transparent solid; padding-right:10px; padding-left:10px; margin:0px; }

/* Selected hover*/

.s4-tn .selected > a:hover{ color:black!important; }

/* Sub items border */

.s4-tn ul.dynamic{background-color:#C8F38C; }

/* Menu Item */

.s4-tn li.dynamic > .menu-item{display:block; padding:4px 10px; background-color:#fff; color:#000; border-bottom:1px solid #ccc;} .s4-tn li.dynamic > a, .s4-tn li.dynamic > a:visited {color:#000;}

/* Menu Item Hover Over */

.s4-tn li.dynamic > a:hover{color:#000; text-decoration:none; background:url(“/_layouts/Images/selbg.png”) repeat-x left top; background-color:#C8F38C; font-weight:bold;}

/*Remove the down arrow next to first level menu items*/

.menu-horizontal A.dynamic-children SPAN.additional-background {  background-image:none!important;  padding-right:0px!important; }


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s