Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Some CSS for a Stackexchange fix/explanation
/* Targets the base menu item, so all menu items,
Then we override this with other styles later for more specific cases like the current page or when we hover
I've used the ID of the menu here to make sure nothing overrides it as ID = more specific than Classes
*/
/* RULE 1 - ALL ITEMS IN THIS MENU */
#menu-menu-1 .menu-item {
/*put your styles in these brackets*/
}
/*Targets same as above, but will apply these styles when we hover over them */
/* RULE 2 - ALL ITEMS IN THIS MENU ON HOVER */
#menu-menu-1 .menu-item:hover {
/* Stuff in here will ONLY apply on mouse hover - if you set properties in Rule #1 they will be
'inherited' (applied) unless you specify a new value. */
}
/* RULE 3 - CURRENT PAGE IN THIS MENU */
#menu-menu-1 .menu-item.current-menu-item {
/* Stuff here will ONLY apply to the current page's menu item, which WordPress
gives the 'current-menu-item' class to. Any properties you specified in Rule #1
will be 'inherited' (applied) unless you specify a new value.
*/
}
/* RULE 4 - CURRENT PAGE IN THIS MENU ON HOVER */
#menu-menu-1 .menu-item.current-menu-item:hover {
/* Stuff here will only apply to the current page's menu item, ON HOVER
This is where we can really see the cascade (from Cascading Style Sheets - CSS) in effect
Styles in this section will be 'built up' from the previous code, then we can make any changes
we need to get the desired result. The cascade will go..
- styles before our CSS code (theme's built in styles, bootstrap etc)
- Rule#1 changes will then be applied
- Rule#2 changes will then be applied
- Rule#3 changes will then be applied
- Any changes we specify here will then be applied
This means if you set a line-height of 18px in rule#1, you would not need to put it in any of the other rules here
unless you wanted to change it.
*/
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.