If you’ve created a special background image to give your navigation menu a bit more zip, you’ll need to follow the first option above, but use the same image as your header_area background image () as you do for your menu background image.
In Colors, you will see a few sections where you can change the default color. For Face, I choose a darker color which you can see in the screenshot below. Selection Color refers to the currently active button such as the Ok Button showed below.. Changing the Highlight Color will effect Selected Items in the UI such as Tabs and tools as shown by the Apply button bellow.
Style/Pattern can be used to specify a special texture for each of the Type options from the Drop Down menu. The color overlay for these background options can be chosen from the drop down menu to right of the Style/pattern drop down menu as shown by the screenshot below:
To apply the changes, go to Apply, or Click on OK.
I find the darker face color to be easier on the eyes and does not conflict with the color of text. Of course the text color can be changed to accommodate a darker UI.
In the backgrounds section, users can choose from different background types, and colors.
Type: The Type drop down menu allows the user to select which background area is currently being modified by the other options in the Backgrounds section of the Customize UI Window.
As long as the height of the narrow background image exactly matches the height of your header graphic it will leave a gap at the bottom of the header area div showing the background colour. This will match the height and colour of your menu background, extending it across the width of your site.
That was the approach I used on the first site I linked to above, and it extends the menu background image across the bottom of your header area, covering the entire width of your site.
Awesome. You guys have no idea how much you’re helping me out. I was wondering the call out for changing the whole nav menu color, and here it is.
So set up your navigation menu colours in the Nav Menu screen, and make a note of the 6 digit colour code that appears in the colour sample of your ‘link background color’ option.
A common pitfall of a CSS based columns layout is that the columns do not share a common height. Unlike a table based layout where the height of the table itself dictates the height of all of its columns, CSS columns are independent of one another in that respect. Now, this can be problematic (from a design standpoint) when you wish to style one of your CSS columns in a way that should extend all the way down to the end of the layout, such as giving a side column an explicit background color, a surrounding border etc.
To make your navigation bar extend to the width of your content box you need to create the same background colour for the entire navigation menu bar as you use for the ‘link background color’ option in the Design Options > Fonts, Colors and More > Nav Menu screen.
If you rely on the Design Options screen (Fonts, Colors and More) to customise your navigation bar, you’ll only be able to affect the actual menu tabs, not the entire menu bar extending the width of your content box.
Also if you want to change navigation tab link color, hover, text color and etc. options available in wordpress admin. Goto thesis options in left sidebar under this select design options.
… but replace the 000000 following the hash with the 6 digit colour code you copied from the ‘link background color’ option in your Nav Menu screen.