[Resolved] Why can't I get a full background colour hover on my font-awesome menu labels?

[Pete]

http://www.shockwave.net.au/

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?

[Pete]

OK for some reason it seems the @media css is removing the top and bottom padding of the menu item?

• This reply was modified 8 years ago by Pete.

[Pete]

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?

[Tom]

I’m not sure I see what you mean – I even checked your CSS for what you said above and can’t see it.

[Pete]

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

[Tom]

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/

[Pete]

resolved

[Author]

Posts