Style Nav Menu Tabs

This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the User’s Guide home page for current documentation.

This Answer is based on the style definitions from Thesis 1.5 or lower; in 1.6+, you can set colors for the Nav Menu under Thesis Design Options (under Fonts, Colors, and More!). For other styling, replacing #tabs in the examples below with .menu will generally be sufficient.

Change Color of All Menu Tabs

Place this code in custom.css (changing the color values to use your own choices):

.custom #tabs li {
   background: #efefef;
}

Change Color of Active Menu Tab

Place this code in custom.css (changing the color values to use your own choices):

.custom ul#tabs li.current-cat a, .custom ul#tabs li.current_page_item a {
  background-color: #000000;
  color: #ffffff;
}

Change Colors of Menu Tabs When Hovering

Place this code in custom.css (changing the color values to use your own choices):

.custom ul#tabs li a:hover {
  background:#000000;
  color:#ffffff;
}

Remove Underline on Menu Tabs When Hovering

Place this code in custom.css:

.custom ul#tabs li a:hover {
  text-decoration: none;
}

Remove Uppercase Formatting on Menu Tabs Text

Place this code in custom.css:

.custom ul#tabs li a {
  text-transform: none;
}

Change Color of Borders on Menu Tabs

Place this code in custom.css (changing the color values to use your own choices):

.custom #tabs, .custom #tabs li {
   border: 1px solid #ddd;
}

Note: This also affects the left and bottom borders along the nav menu itself.

Remove Borders around Menu Tabs

Place this code in custom.css:

.custom #tabs, .custom #tabs li {
  border-style: none;
}

Note: This also affects the left and bottom borders along the nav menu itself.