How To Change Nav Bar Item Hover

What is a hover? Hover is a pseudo-class of CSS. Pseudo-classes allow some selectors to have special effects. A pseudo class, in this case hover, looks like this: :hover. Notice the colon. I will explain more about CSS in later posts, so for now let’s change the hover function in your Thesis customization.

By default, Thesis’ nav item hover is an underline. I don’t personally care for underlines (only in certain contexts), but Chris Pearson decided that Thesis nav items should behave like that by default. He knows his stuff. But, if you’re stubborn like me, you still want to change it.

Let’s change the hover:

1. Open custom.css.
2. Enter the following:

   .custom #tabs a:hover { background: #color hex here; text-decoration: none }

In this very simple example, we changed the background color and took away the underline. What are other options? You could change the text color by adding color: #color hex here;, change the top, right, bottom or left border with border-top: #color hex here 1px solid; [replace top with another side name] or a whole host of other changes. One of my absolute favorites is the following:

.custom #tabs { border-left: none; border-bottom: none; }
.custom  #tabs li { border-top: none; border-right: none; }
    .cusotm #tabs a:hover { background: #d9d9d9; margin-top: -.2em; }

Just, uh, don’t forget the decimal or you will really piss people off.

Oh, and don’t forget to submit ALL your questions to thesistutor[at]gmail[dot]com.