Modify Dropdown Navigation (Part 2)

This post is the second part on modifying a sample dropdown navigation bar. I will discuss the changes to the CSS file that will complete this modification. In this tutorial, the colors will be converted from a green to a blue hue of similar intensity. This will require modifying the hue and not the saturation or brightness (HSB).

Step 1:
Download the sample navigation ((here)). Once you unzip the files, open the "pro_dropdown_2.css" file in an editor. Locate all the ".gif" files and rename the file names from the existing file name to the file names you chose from the previous post.

Example:
three_0.gif to blue_0.gif

Copy the new ".gif" files you created to the website folder.

Step 2:
Change all the green hue colors to blue hue colors. This can be done by locating the existing green colors that start with a "#" character. Once you find the hex color code, change it to a similar blue hue. This can be done by loading Photoshop and opening up a new blank image. In the toolbox, click the foreground or background color selection box. This will bring up the "Color Picker". Type in the first hex color code you find in the "pro_dropdown_2.css" file.

Example:
background: #bbd37e

Change this hue to an equivalent blue hue by changing the "H:" value. This can be done by adding 120 to 77 which is 197. Enter 197 in the "H:" box.

Copy the new hex value which is #7fbcd4 and replace this with the original value in the CSS file. Repeat this process for all the green color hues in the file.

Click ((here)) for a demo of the finished navigation bar.