The “Page Menu” and the “Category Menu” are sort of mirrors of each other. I am using them also as “Decoration Bars” on the top and bottom of the Header Image(s), respectfully. So as we adapt the Page Menu for that purpose, we need to keep in mind that we will be doing the same thing, almost, for the Category Menu also. The Menu Bar will be above our Header Image and have links to our pages from left to right. The Category Bar will be below our Header Image and have links to our categories from right to left.
Page Menu Bar
The Page Menu, as I said, is above the Image file. If you read my post about the Theme Header Layout (Money.M143.Net), then you have already put the Page Menu just above the Header Image.
So let’s get into the settings by going into the “Theme Options”, “Header Area” Section and clicking on “MENU 1 (Page Menu)”. I am assuming you have read my previous posts, starting with the one linked to above, and so I will not go into detail on how to open this page.
There are many options on this page you may want to look at, but many of them may already be set to what you want (the default settings!). So I am only going to point out the ones I am changing, and you may want to change also.
Title tags in Page Menu Bar
I like to have a Title pop up on every link, so I will change “Title tags in Page Menu Bar” to “Yes“.
Border around all menu items
dashed 1px #cccccc
I do not like dashed and I want to use my darkest color, so it has a good contrast to the the other Page Menu colors. I went to my Choosing Website Colors (Money.M143.Net) and picked my darkest color…
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.
Because the “Background color” 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.
So I pasted 639943 into the “Background color” box.
Background color: Hover
When a person points their mouse at the menu, I wanted it to change color to Red of about the same intensity at the Green I am using, so in “Background color: Hover” I pasted in:
Background color: Parent
I decided Black would be a good contrast for the “Background color: Parent” so I pasted in:
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:
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”
I clicked on “Save Changes” and took a look at what I had done!
Wow! It is starting to look great!