Nav Bar Changes Not Sticking

[onepace 0]

I was trying to change the text color in the nav bar to white (#FFFFFF). I found another topic that offered this as the solution: #primary-nav li.page_item a {color: #FFFFFF; font-size: 13px; } I put the above code in the style.css sheet in the base theme. At first it worked perfectly. But after a day for some reason the text reverted back to gray. Here is the site www.pureonlineprofit.com In addition, I am trying to decrease the white space between the first post and the boxes that exist on the page.

[catrina 103]

Have you tried adding the CSS to Custom Code in the settings? Please add this CSS to decrease the white space: [code]#dynamic-content {margin-top: -20px;}[/code]

[onepace 0]

catrina Thanks for that,and while it did move it up some, for some reason it would barely move it. However, that doesn't address my primary question, which is why isn't my CSS sticking to change the nav bar text to white?

[Rob 547]

The principle reason is that you're applying the changes to the static style.css. The way PlatformPro works is that it takes Custom Code / CSS Rules and applies them dynamically, overwriting anything in other .css files. By placing the style changes in style.css, you leave them vulnerable to changes you may make later in Custom Code. The CSS Rules area is actually an ingenious place where you can keep track of those changes you've specifically made and where you may react to styling errors created anywhere by plugins, etc. Style.css, being static, will not overwrite things, and will remain part of the .css framework. If you look inside both platformpro and platformbase, you'll find many .css files, each doing their own fundamental thing. The Custom Code CSS Rules allows you to control that entirely without needing to know which stylesheet does which process.

[onepace 0]

I did not know that, thank you. However, I removed the one line of code I had in the style.css sheet and put it in the custom code so that my custom code is as follows: #dynamic-content {margin-top: -20px; } #primary-nav { background: #005711; } .main_nav .main-nav li a:hover { background: #FFFFFF; color: #005711 !important; } .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: #005711; color: #FFFFFF; } #header h6 { visibility:hidden } div.branding_wrap {margin-top: -15px; } #primary-nav li.page_item a {color: #FFFFFF; font-size: 13px; } The nav bar still displays 2 different font colors...white and gray. No clue why it is doing this.

[Danny+ 1,327]

Hi Onepace, Basically the reason you have two colors in your navigation is that you have the CSS correct for the current page which is set to white, but you don't have the CSS for the other menu items set yet. If you add this code below to your Platform Settings --> Custom Code --> CSS Rules: [code] .main_nav li a {color: #FFFFFF;} [/code] This should do the trick, if however the other menu items are still not white, then try replacing the code you just added with the code below: [code] .main_nav li a {color: #FFFFFF !important;} [/code]

[onepace 0]

That worked. Thank you.

[Rob 547]

The best way to thank Danny or others who provide support here is to click the "Thanks" button which helps assure that support is available.