Navigation Bar Color and Header Background Color Change

[onepace 0]

I know this question has been asked because I used the search function and found several different answers, which I tried, but none worked. I'm trying to do the following: 1. Change background color of navigation bar. 2. Change hover color of navigation bar. 3. Change text color of navigation bar. 4. Change background color of header area. I know that's a lot. I'm trying to make my header/nav bar look like www.onlineincomelab.com. I like how they have the red on the nav bar (though I want orange) and a gray background (not sure if this is tied to their logo). Here is the link to my site www.coachtheheart.com Last thing, how do I change the height of the header so I can make it shorter? I want more info above the fold. Thanks.

[Rob 547]

While you can do this in CSS, did you try Design Control? Most of that is right there ready for easy changing.

[onepace 0]

I went to Design Control and checked changed each color 1 at a time to bright pink and then refreshed and checked the site. Unless I'm just crazy I couldn't find anything that made the changes above to the nav bar. If they are there, any way you could point out which ones?

[Danny+ 1,327]

Hi Onepace, 1. Change background color of navigation bar. Change the Nav background color to the full width of your layout. [code] #primary-nav { background: #DDDDDD; } [/code] Change the Nav background color to fit the width of your nav. [code] #nav_row.main_nav, ul.sf-menu ul li { background: #111111; } [/code] 2. Change hover color of navigation bar / 3. Change text color of navigation bar. This allows you to change the background color as well as the text/link color too [code] .main_nav .main-nav li a:hover { background: #FFFFFF; color: #FF0000 !important; } [/code] Use this to change the current page background color of the link and text/link color. [code] .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a { background: #F7F7F7; color: #FF0000; } [/code] 4. Change background color of header area. [code] #branding .content-pad { background: #DDDDDD; } [/code] Remember that you'll have to change the hex color codes to your choice I simply added them in at random.

[onepace 0]

Most of that worked. I appreciate the help. Still trying to fix 2 things: 1. How do I make the nav bar/branding extend full page width while the content is not full page? 2. How do I make the text in the nav bar text always white?

[onepace 0]

Ugh, I logged out and back in and for some reason the nav bar reverted back to white...the custom code is still there. Here is the site. www.pureonlineprofit.com

[onepace 0]

Got it all figured out. Thanks guys.