[Resolved] primary menu icons larger and below label

Home Forums Support [Resolved] primary menu icons larger and below label

Home Forums Support primary menu icons larger and below label

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #625117
    sparkle

    hi, i love your forums and am having to ask fewer and fewer of my own questions because so many of the answers are already here. thank you.

    i’m trying to make the icon in my menu item larger and appear below the label. i was able to make the icon larger and above the icon with this:
    div.inside-navigation .menu-item.menu-item-type-post_type.menu-item-object-page a i.fa.fa-star {display: block; font-size: 300%;}

    i am able to make the icon appear after the label by doing this:
    div.inside-navigation .menu-item.menu-item-type-post_type.menu-item-object-page a i.fa.fa-star {display:block; float:right; font-size: 300%;}

    for the life of me, i can’t figure out how to make the icon on the bottom and the label on top.

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #625132
    David
    Staff
    Customer Support

    Hi there,

    with your current set-up you should just need to simply switch the label around. So:

    my label<i class="fa fa-star" aria-hidden="true"></i>

    Let me know

    #625622
    sparkle

    ah! so simple! thank you, David!

    ๐Ÿ™‚

    #625626
    David
    Staff
    Customer Support
    #633536
    sparkle

    ok… so i got fancy and have added one menu item and made it smaller than the rest. i did math, and it worked. now i want to remove the grey overlay on the item that is the home button. how do i do that?

    thanks!

    #633570
    David
    Staff
    Customer Support

    OK, so you could try this CSS:

    .main-navigation .main-nav ul li:first-of-type[class*="current-menu-"] > a {
        background-color: transparent;
    }
    #634234
    sparkle

    hmm… that made my menu item’s background image disappear, but i only want to disable the ‘active item overlay’ color.

    #634382
    Tom
    Lead Developer
    Lead Developer

    Try this instead:

    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
        background-color: transparent;
    }
    #635998
    sparkle

    this worked perfectly, thanks tom & team!

    #636018
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.