The Category Menu!

The “Category Menu” and the “Page Menu” are sort of mirrors of each other. I am using them both as “Decoration Bars” on the bottom and top of the Header Image, respectively. As we adapt the Category Menu for that purpose, we need to keep in mind that we will be doing the same thing, almost, as we already did for the Page Menu (with a few additions!). The Category Bar will be below our Header Image and have links to our categories from right to left. The Menu Bar will be above our Header Image and have links to our pages from left to right.

Category Menu Bar

The Category Menu, as I said, is below the Image file. If you read my post about the Theme Header Layout (Money.M143.Net), then you have already put the Category Menu below the Header Image.

Let’s get into the settings by going into the “Theme Options”, “Header Area” Section and clicking on “MENU 2 (Category Menu)”. I am assuming you have read my previous posts, so I will not go into detail on how to get into the options pages.

There are many Category Menu options here that you may want to look at. Many I will just leave the way they are (the default settings!). I am going to mention the ones I am changing, that you may want to adjust also.

Sort Category Menu Bar by:

I have no desire to have my Categories listed by ID number order, that would be basically as I created them. I would prefer them to be alphabetically, according to their name! If I change the name, then it will change the order also. So I want to change “Sort Category Menu Bar by:” to:

“name”

Sorting order Category Menu Bar

Even though the Category Menu starts on the right, because I set it that way in the Theme Header Layout Post (Money.M143.Net), people still read from the left to the right. So I want my Categories to be sorted alphabetically, from the left to the right.

Sorting from A-Z is ascending (ASC).

Sorting from Z-A is descending (DESC).

However, remember these are being displayed from Right to Left. So because I want the A’s on the Left and the Z’s on the Right. I need to choose a descending (DESC) sort, so when they are displayed from right to left it will be what I want.

Confused? Just change it each way and see what it does for you? (That assumes you have at least 2 categories!)

I set “Sorting order Category Menu Bar” to:

“DESC”

Title tags in Category Menu Bar

I like to have a Title pop up on every link, so I will change “Title tags in Category Menu Bar” to:

Yes“.

Later I will set a “description” for each Category (Posts -> Categories -> Click on category name).

Border around all menu items

solid 1px #000000

I want to use my darkest color, so it has a good contrast to the the other Category Menu Bar colors. This is set the same for the Page Menu colors. I went to my Choosing Website Colors (Money.M143.Net) and picked my darkest color…

#205500

I pasted this into “Border around all menu items”

solid 1px #205500

Of course, you would use your darkest color on your color chart you made for your website.

Background color

Because the “Background color” for the Category Menu Bar is a block of color, I did not want it as dark as the frame, so I chose a lighter color, one lighter than the frame. This is the same color I use in the Page Menu Bar.

639943

So I pasted 639943 into the “Background color” box.

Background color: Hover

This Red on the Category Menu Bar is the same as the Page Menu Bar Red. So in “Background color: Hover” I pasted in:

CC0000

Background color: Parent

This is likely starting to feel a little Déjà vu (already seen). This is the same as the Page Menu. The “Background color: Parent” I pasted in:

000000

Link Color
Link Color: Hover

White seemed to me to be the best choice for both the “Link Color” and the “Link Color: Hover” so I pasted in:

FFFFFF

White or Black Arrows as Sub Menu Indicator?

I changed this to “White” in the “White or Black Arrows as Sub Menu Indicator?” to match my “Link Color”

Save Changes

I clicked on “Save Changes” and took a look at what I had done!

Wow! The menus look great together!

 

Leave a Reply

Your email address will not be published. Required fields are marked *