2. Skinning – Navigation Bar Above Header
Navigation Bar Above Header
My top Navigation Bar is designed to be a menu. Here’s how I set my options.
Default or custom?
I selected “Custom styles” so that I can choose colors, fonts, etc…
Navigation Bar Background
This is the background color of my top navigation menu.
Background Color: I selected “Custom: #FFFFFF”. Everything else I left on default settings.
Navigation Bar Border
This makes a border around each menu item in the top navigation menu. I left all of these at the default settings, which should be “No Border” for “Border Style.”
Navigation Background Font
I left this alone, because the settings farther below will be the ones to affect the appearance of my navigation bar menu.
Navigation Menu Items
Background Color: “Custom” and default (#ffffff).
All others here are left as default.
Navigation Menu Items Border
I used the following settings for Top border, Right border, Bottom border and Left border options:
- Border Style: “Solid”
- Color: “Custom” “357566” (Teal)
- Border Width: “2”
- Border Width Units: “Pixels (px)”
Navigation Menu Items Font
Mine are set as follows.
Font Color: I chose #133178 which is a blue color that will complement my logo. Anything goes – be creative & have fun with this! Just be sure it’s easy to read.
Font Face: I kept mine on the default – “Arial, Helvetica, sans-serif.” Again, though, you can experiment here, if you wish.
Font Size: I went for a little larger and set mine to “16” with Font Size Type: set to “Pixels (px).”
The rest of the settings here are Font Style: “Normal,” Font Variant: “Small Caps,” and Font Weight: “Normal.”
Navigation Menu Items: Hover
When someone hovers their mouse over the menu items, the following settings can be made to change the appearance to highlight what they are hovering over. I set the items here for Background Color to “Custom – Default” (#ffffff).
Navigation Menu Items: Hover Border
Top border, Right border, Bottom border, and Left border are all set with a wider (4px) border than the non-hovered green border so that it jumps out as follows:
Border Style: “Solid” Color: “Custom” “8FA7C7” (Blue-Gray color) Border Width: “4” Border Width Units: “Pixels (px).”
Navigation Menu Items: Hover Font
I like to set mine to contrast when hovered over. Here are my settings:
Font Color: “66071A” (Burgundy) Font Face: “Arial, Helvetica, sans-serif” Font Size: “16” Font Size Type: “Pixels (px)” Font Style: “Normal” Font Variant: “Small Caps” Font Weight: “Normal”
Navigation Menu Items: Visited
I just make sure to select “Custom” “ffffff”
Navigation Menu Items: Visited Border
I don’t want these to appear different just because someone has visited them. I’d like them to keep coming back to these items if necessary, and I think different colors/styles here would be confusing. So I set all of these the same as “Navigation Menu Items Border” above.
Navigation Menu Items: Visited Font
I set this to be slightly lighter than the “Navigation Menu Items Font”. I chose Font Color: “13327A” (Lighter dark blue) Font Face: “Arial, Helvetica, sans-serif” Font Size: “16” Font Size Type: “Pixels (px)” Font Style: “Normal” Font Variant: “Small Caps” Font Weight: “Normal”
Navigation Menu Items: Highlighted
Mine is set to: “Custom – FFFFFF” The rest are default.
Navigation Menu Items: Highlighted Border
I set this to be the same as the “Hover Border” above.
Navigation Menu Items: Highlighted Font
I set this to be a logo-coordinating purple. I chose Font Color: “613069” (Medium purple) Font Face: “Arial, Helvetica, sans-serif” Font Size: “16” Font Size Type: “Pixels (px)” Font Style: “Normal” Font Variant: “Small Caps” Font Weight: “Normal”
Go To Step 3: “Skinning – Header” →
← Back To Table of Contents
Sorry, the comment form is closed at this time.