Deciphering Drop Down Navigation CSS
Posted 15 April 2013 - 01:16 PM
Styling dropdown navigation, even with the help of firebug and web-developer toolbar is very difficult. There are so many selectors and it is difficult to determine what applies to what.
For example: whenever I use the ul.sub-menu class as a selector or part of a selector it has no effect - why is this?
Would it be possible to provide a breakdown of all the dropdown css with an explanation of what each selector is for?
Posted 15 April 2013 - 02:35 PM
You need to add #page before ul.sub-menu in order for your custom css to overwrite the default (as explained here under PageLines Overrides:). For example:
This applies to all css selectors you use in your custom css. So for example, if you wanted to change all h1 in your site, you would use:
Here's a breakdown of the dropdown css (where ____ just stands for the class given):
div.____ = The DIV container the navigation is in
ul.____ = The list of links (this is the entire navigation list)
li.____ = Individual links (each menu item in the navigation)
Each of these has its own class and if you're trying to style an individual link, you would, for example, use css like this:
Posted 16 April 2013 - 06:53 AM
Yes I see thank you. That has helped a great deal and resolves my query for all practical purposes.
As to the broader question, for example here is one set of classes applied to the ul:
main-nav sf-menu sf-js-enabled sf-shadow;
here are a set of classes applied to the subsequent li:
menu-item menu-item-type-post_type menu-item-object-page menu-item-64
While some of these such as sf-shadow are obvious what are the rest? What do they do and what are they for? This is beyond the scope of a forum post, but it would be useful to know how the entire navigation breaks down and what each class does, perhaps as part of the support documentation?
Posted 16 April 2013 - 08:19 AM Best Answer
There is no need for us to provide documentation for those classes are created by Wordpress not us.
Posted 17 April 2013 - 09:15 AM
No thanks Catrina, as I said above the issue is for all intents and purposes resolved, Thanks for the quick response.