Navigation css control

[parsonsbowne 0]

I'm using PlatformPro development version and I'm really struggling with the formatting of the navigation menus. The entire product seems to be suffering from massive div-itis, and I can't seem to really locate where the control should be added. After hours of crazy searching, I've managed to format TWO of the three states using the following css: #primary-nav ul.sf-menu a {color:#000000;} #primary-nav ul.sf-menu a:hover {color:#FFFFFF;} #primary-nav ul.sf-menu a:focus {color:#FFFFFF;} #primary-nav ul.sf-menu li a:hover {background:#FF3333;} #primary-nav ul.sf-menu li a:active {background:#000000;} #primary-nav ul.sf-menu li a:focus {background:#000000;} The link and the HOVER states are working fine, but the FOCUS state will simply not work at all. Can anyone out there tell me what to add to custom code css to adjust the focus link and background colors? Thanks

[parsonsbowne 0]

What I really want to do is change the color of the CURRENT page menu item. It's possible that the focus state is not the place to do that. But I can't really get any css to work on that. I've tried things like: #primary-nav ul.sf-menu li current-page-item {background:#000000;} and #primary-nav ul.sf-menu li.current-page-item {background:#000000;} help.... PS the site is at: http://rtierneyproductions.com/markel/

[parsonsbowne 0]

I've managed to find an answer, but i am still very confused as to how this css plays out. A different thread on this topic had this code to change the type and background of the nav bar links on the CURRENT page: .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 { color:#fff; background:none repeat scroll 0 0 #99cc33; } one would expect that the line "color:#FFF" would make the type white. But it did not, and a followup question yielded the additional instruction to make the current page nav link type white: #primary-nav li.current_page_item a {color:#FFF;} The question is WHY? Why didn't the first instruction work? and why is it necessary to go to two such vastly different places and selectors in the css to change these things. Is this css literally all over the map, or is it just my inexperience with it?

[bryan-hadaway 3]

I think it's a specificity issue. Try adding `body` before your selectors, example; `body #primary-nav ul.sf-menu a {color:#000000;}` Thanks, Bryan

[lloyd118+ 1]

I'm also having a similar problem, I can't seem to get this to work.

[cmunns 16]

Hmm... I can definitely see why this is frustrating although technically it's just a lack of understanding of hierarchy which in this case is very complex so I don't blame anybody for feeling confused. The easy answer is that `#primary-nav` takes precedent over `.main-nav` because `.main-nav` is a class assigned to a div that is INSIDE of the div with the id of `#primary-nav` When you have dropdowns enabled in the theme options, much of the menu styling comes from superfish.css which happens to use #primary-nav as the outermost selector so that other navigation items on the site will not inherit the style. I can go in to clarify for more, but does this make sense?

[parsonsbowne 0]

It makes sense. My understanding of css is not great (its growing), but I get the idea. I think my frustration here is not with the nature of css hierarchy application, but the way it is structured and used in platform pro. Changing the background and type colors of nav bar items is something that should be VERY easy in a framework designed to keep beginners out of the code and give pros an easily manipulable tool. But here, the reality is exactly the opposite. You have to know a lot and still struggle to find the right places to add custom code to accomplish a relatively modest and common goal. If I had to do it again in a week, I'd probably have to return to this thread to find out what I did.

[cmunns 16]

Definitely understandable especially since the css for when dropdowns are active versus not is different, but that's something that we can't change as selectors naturally change when you reach for that functionality and differentiate from the standard menu. Also, using simpler selectors such as `ul li` would cause every menu on the site to look the same. At any rate we are here to help you and hope the payoff is worth it.

[parsonsbowne 0]

Ok, and I'm gonna take advantage of your help again. : ) I just added a child page to my menu to get a dropdown and the color of the TYPE on the "current" page and items in the dropdown menu went berzerk. It seems to be another nearly impossible thing to isolate. I've tried: #primary-nav ul.sf-menu li a { color: #FFFFFF; } which looked right, but was not. I also tried several other things which also failed or caused a whole lot of other trouble. I won't go into them because they might confuse things further. I think it might be time for a post which gives us users a nice full block of css code to change a main dropdown menu INDEPENDENTLY of the primary secondary and tertiary colors of the site. A full set of codes which we can paste into our custom code and adjust colors and backgrounds to our needs. If you need reference to what is going wrong: http://rtierneyproductions.com/markel/anatomy-of-addiction/excerpt and check out what's happening under the dropdown menu there. Thanks

[bryan-hadaway 3]

I'll take a closer look. Thanks, Bryan

[bryan-hadaway 3]

Maybe I can get you to post all your Custom CSS? Thanks, Bryan

[paulie 0]

Hey guys, I am working on a page with drop-down menus enabled and was looking around for a code to style the "current page" navigation item. This is what made it work for me:

	#primary-nav .main-nav .current_page_item a {
	color: #FFFFFF;
	background-color: #000000;
	}
	

I have one issue though: Everything seem to work fine until I visit the parent page which holds the drop-down sub-menu. As long as I am on this page the drop-down items are the same color as "current page" highlight which is undesirable. Is there a way how to isolate the drop-down menu items and apply styling to them independently from the Primary navigation ? Thank you.

[kastelic 6]

Certainly. The dropdown items are just a list within a list so you just have to specify that you want to style any 'a' that is within an 'li' that is within a 'ul' that is with anything styled as '.current_page_item) which will be an 'li.' #primary-nav .main-nav .current_page_item ul li a { }

[paulie 0]

Thank you Jimmy, that did the trick. Awesome.