Menu icons and text on hover

  • Resolved missmikado

    (@missmikado)


    10 years, 7 months ago

    Hi,

    is there a change to hide the text (or give it background color) and only show the icon until the mouse hovers over it?
    I want to show the text underneath only on hover. So I would need to modify the icon and the text seperately, but they are in one div and both linked fonts.

    Thank you

Viewing 7 replies - 1 through 7 (of 7 total)

  • Any link please?

    Thread Starter missmikado

    (@missmikado)

    https://www.lieblingsrogg.de

    Hi try as something below and let me know

    #menu-header_menu a:hover {
background: #000;
color: white !important;
}

    this will put a black background and white text when you hover.

    #nav-main ul.sf-menu a {
color: #fff;
}
#nav-main ul.sf-menu a i {
color: #86162c;
}

    Try that,

    Kadence Themes

    Thread Starter missmikado

    (@missmikado)

    Yes, that did help – thanks a lot!!

    Hi missmikado!
    By chance i found your post! Cool design that’s awesome!
    I see you’ve been able to change the icons on your primary menu, i am desperately looking to do so, would you have any code & clues how to do it?
    Thanks anyways & cheers!

    Thread Starter missmikado

    (@missmikado)

    Hi Paola,

    what exactly do you want to change?
    I’m using the font icomoon (you can make your own on icomoon.io) to add some more icons. I copied the icomoon-css into the template-css and uploaded the font. Than, you can use the new classes in the menus.
    I used the code from the Kadence Theme member you see above to let the text “disappear”. Actually it just has the same color as the background and is only seen when I hover.

    Cheers

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Menu icons and text on hover’ is closed to new replies.

Tags