Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support Why can't I get a full background colour hover on my font-awesome menu labels?

  • This topic has 6 replies, 2 voices, and was last updated 2 years ago by Pete.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #181542
    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?

    #181543
    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 4 years, 8 months ago by Pete.
    #181546
    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?

    #181676
    Tom
    Lead Developer
    Lead Developer

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

    #182020
    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;}
    #182053
    Tom
    Lead Developer
    Lead Developer

    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/

    #737314
    Pete

    resolved

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.