Some CSS for a Stackexchange fix/explanation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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