Archived topic
Why can't I get a full background colour hover on my font-awesome menu labels?
6 replies · Started by Pete on March 25, 2016
main menu, right most menu item
I have 2 different versions of the font awesome menu item that either display:inline or display:none according to @media size. But for the life of me I can't get the hover to cover the whole item? especially when the left home menu item is fine?
OK for some reason it seems the @media css is removing the top and bottom padding of the menu item?
OK, i've "fixed" it by adding 14px of padding to those items in the @media css, but I don't know why it needs this to happen?
I'm not sure I see what you mean - I even checked your CSS for what you said above and can't see it.
This is the css i'm using to get the padding correct for the font awesome menu items... I don't need this padding css for the other menu items that are not subject to the @media conditional css...
@media only screen and (min-width:415px) and (max-width: 5000px) {
li#menu-item-1926.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1926 a {display:inline;padding:14px 20px 14px 20px;}
li#menu-item-1927.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1927 a {display:none;}
}
@media only screen and (min-width:320px) and (max-width: 414px) {
li#menu-item-1926.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1926 a{display:none;}
li#menu-item-1927.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1927 a{display:inline;padding:14px 20px 14px 20px;}
nav#site-navigation.main-navigation .menu-item-1026 a{font-size:14px;}
nav#site-navigation.main-navigation .menu-item-1027 a{font-size:14px;}
}
@media only screen and (min-width:0px) and (max-width: 320px) {
li#menu-item-1926.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1926 a{display:none;}
li#menu-item-1927.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1927 a{display:inline;padding:14px 10px 14px 10px;}
nav#site-navigation.main-navigation .menu-item-1026 a{font-size:15px;padding-left:15px;padding-right:15px;}
nav#site-navigation.main-navigation .menu-item-1027 a{font-size:15px;padding-left:15px;padding-right:15px;}Hmm, not sure why that would be necessary.
How are you adding the icons?
This plugin is pretty awesome: https://en-ca.wordpress.org/plugins/menu-icons/
resolved
