Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 6, 2022 at 3:00 pm #1367816
    MENS

    Hi,

    Is it possible to have an custom icon in stead of thje standard underline on hovering a menu item?
    See example in link.

    Thanks in advance

    Jasper

    October 6, 2022 at 11:42 pm #1367878
    Nikko

    Hi Jasper,

    Please try to add this CSS code in Enfold > General Styling > Quick CSS:
    (just change the image URL and and background size as you see fit)

    #top #header .av-main-nav > li > a:hover {
    background-image: url(https://kriesi.at/themes/enfold-2017/wp-content/uploads/sites/66/2017/02/logosquare-layer-mini.jpg);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: bottom center;
}

    Best regards,
    Nikko

    October 7, 2022 at 1:13 pm #1367949
    MENS

    HI Nikko,

    Thank you so much!

    Is it also possible to keep the button active or highlighted after click?

    October 7, 2022 at 1:40 pm #1367954
    Yigit

    Hi,

    Please use the code as following

    
#top #header .av-main-nav > li > a:hover,
#top #header .av-main-nav > li.current-menu-item > a {
    background-image: url(https://kriesi.at/themes/enfold-2017/wp-content/uploads/sites/66/2017/02/logosquare-layer-mini.jpg);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: bottom center;
}

    Best regards,
    Yigit

    October 11, 2022 at 3:06 pm #1368436
    MENS

    Hi Yigit,

    Thank you so much!

    Added media querie beccause the image appeared behind the hamburger menu and removed the standard underline. Working like a charm.

    @media only screen and (min-width: 990px) {

    #top #header .av-main-nav > li > a:hover,
    #top #header .av-main-nav > li.current-menu-item > a {
    background-image: url(https://www.bahai-uitgeverij.nl/wp-content/uploads/2022/10/lintje.png);
    background-size: 20px 34px;
    background-repeat: no-repeat;
    background-position: bottom 8px center;
    }

    .avia-menu-fx {
    display:none!important;}

    }

    October 11, 2022 at 3:23 pm #1368439
    Yigit

    Hi,

    Great! Glad you figured it out and thanks for sharing your solution :)

    Let us know if you have any other questions and enjoy the rest of your day!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Icon on hover in stead of underline’ is closed to new replies.