[Resolved] primary menu icons larger and below label

[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.

[David]

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

[sparkle]

ah! so simple! thank you, David!

🙂

[David]

Glad to be of help!

[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!

[David]

OK, so you could try this CSS:

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

[sparkle]

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

[Tom]

Try this instead:

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

[sparkle]

this worked perfectly, thanks tom & team!

[Tom]

You’re welcome! 🙂

[Author]

Posts