Jump to content


Photo
- - - - -

Deciphering Drop Down Navigation CSS


Best Answer Danny , 16 April 2013 - 08:19 AM

There is no need for us to provide documentation for those classes are created by Wordpress not us.

 

http://codex.wordpre...tem_CSS_Classes

Go to the full post


  • Please log in to reply
6 replies to this topic

#1 netage

netage

    Super Member

  • Members
  • 108 posts
  • Country: Country Flag

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?



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

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:

Please Login or Register to see this Hidden Content

). For example:

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content



#3 netage

netage

    Super Member

  • Members
  • 108 posts
  • Country: Country Flag

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?

 

Thanks again.



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 12988 posts
  • LocationManchester, UK
  • Country: Country Flag

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.

 

Please Login or Register to see this Hidden Content



#5 netage

netage

    Super Member

  • Members
  • 108 posts
  • Country: Country Flag

Posted 16 April 2013 - 02:24 PM

Apologies, I was not aware of that. Thanks.



#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 16 April 2013 - 08:17 PM

Do you need further assistance with this issue?



#7 netage

netage

    Super Member

  • Members
  • 108 posts
  • Country: Country Flag

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.