Thesis Packages have been deprecated. Please read this for details.
Feeling strong, my friend? Good! Let’s tackle dressing up the Thesis 2 Nav Menu. We’ll use our color scheme to make the Nav Menu match our target build. There are several items that we’ll change with the way the nav menu behaves. You may have noticed that as you move your cursor over a menu item it will change color. When you move off the nav item it changes back to its original color. You’ll also notice that when you click on a menu option that will will change color, and remain that color. Read on to see how we can change these colors using our color palette.
Navigate to the Thesis 2 CSS page. Before moving forward, make note of the color variables for secondary color A and B. Now, under the CSS Packages section look for the “Menu” item. Click on “Menu”.
Click “Options” at the top then click the “Link Settings” arrow and it will expand to show the different link settings.
We’ll change the “Links” first. This will change the background color for the nav menu links when a visitor first enters the site.
Next we’ll change the color of the nav menu when someone moves their cursor over the selection. This is called “hover” in CSS speak. This helps to make it clear that this is a menu item that can be clicked.
Now look at your nav menu (be sure to save the CSS using the green button then refreshing your browser). Notice when you move your cursor over the menu that the items change color.
The dark text against the dark background is hard to read. So let’s change the color of the text on a hover over. We’ll make it white for good contrast. We can do this by changing the Text Color for Hovered Links. We’ll use hex code “ffffff” which is white.
You can see the difference it makes. It also adds to the contrast between the hovered link and the rest of the nav menu items.
I like to change the buttons so that once a visitor clicks a menu item, it changes color until the visitor clicks to go home or clicks another nav menu option. These are called “Current Links”. By making the current or clicked nav menu change it gives a visual clue that the visitor has changed menu selections. I typically make the the current link the same as the hover. You can experiment and see what combination of Links, Hovered Links, and Current Links styles you like.
You will notice in the images above that our colors are only on the navigation menu items,they do not carry all the way across the nav bar. Open the CSS Menu Package again. Go to the “Additional CSS” tab. Another awesome thing about Thesis 2 is when a CSS control doesn’t have any direct formatting, you can add your own CSS from scratch using the Additional CSS tab. The statement shown below will color the entire nav menu bar with our default color. Click the green “Save” button then click the green “Save CSS” button.
You will now see the entire menu nav bar is the same color as the buttons. While I was in there, I also changed the font size to 16px.
See now, the Thesis 2 Nav Menu wasn’t that hard.