Jump to content
Sign in to follow this  
netage

Deciphering Drop Down Navigation CSS

Recommended Posts

netage    5
netage

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
catrina    103
catrina

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;}

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
netage    5
netage

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
netage    5
netage

Apologies, I was not aware of that. Thanks.

Share this post


Link to post
Share on other sites
netage    5
netage

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×