Archived

This topic is now archived and is closed to further replies.

  • 0

Deciphering Drop Down Navigation CSS

Question

Posted · Report post

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?

Share this post


Link to post
Share on other sites

6 answers to this question

Posted · Report post

Apologies, I was not aware of that. Thanks.

Share this post


Link to post
Share on other sites

Posted · Report post

Do you need further assistance with this issue?

Share this post


Link to post
Share on other sites

Posted · Report post

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: http://support.pagelines.me/docs/customization/custom-css/). For example:

#page ul.sub-menu

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:

#page h1

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:

#page div.___ li.___ {attribute: property;}

Share this post


Link to post
Share on other sites

Posted · Report post

No thanks Catrina, as I said above the issue is for all intents and purposes resolved, Thanks for the quick response.

Share this post


Link to post
Share on other sites

Posted · Report post

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?

 

Thanks again.

Share this post


Link to post
Share on other sites