Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 8, 2022 at 4:56 pm #1343686
    Jak73

    Hi,

    i would like to use images for menu. So i followed this thread:

    https://kriesi.at/support/topic/image-in-menu-item/

    works fine, but there is no hover effect. How can i add a hover effect for that with a different image for each menu entry?

    How can i do that?

    Kind regards Jak

    March 8, 2022 at 5:01 pm #1343689
    Yigit

    Hi Jak,

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
.av-main-nav li a:hover .avia-menu-text {
  opacity: 0.8;
}

    This would reduce opacity to 0.8 on hover :)

    Best regards,
    Yigit

    March 8, 2022 at 5:09 pm #1343691
    Jak73

    Hi Yigit,

    this works. Actually i would like to use hover images instead.
    For each menu item a separate hover image?

    kind regards Jak

    March 8, 2022 at 5:21 pm #1343695
    Yigit

    Hey,

    Please edit your navigation label and insert both images with custom CSS classes as following 

    
<img class="menu-image" src="..." />
<img class="menu-image-hover" src="..." />

    then add following code to Quick CSS field 

    .av-main-nav li a .menu-image-hover {
  opacity: 0;
}
.av-main-nav li a:hover .menu-image-hover {
  opacity: 1;
}
.av-main-nav li a:hover .menu-image {
  opacity: 0;
}

    Regards,
    Yigit

    • This reply was modified 2 years, 9 months ago by Yigit.
    March 8, 2022 at 5:32 pm #1343703
    Jak73

    Hi Yigit,

    button is jumping, when i click on it, and the position is wrong now.

    BTW can we add a fading effect to the hover please?

    kind regards Jak

    March 9, 2022 at 3:23 pm #1343861
    Jak73

    Hi,
    i’m trying and trying, but i can’t get my menu fixed. I added:

    <img class="menu-image" src="..." />
<img class="menu-image-hover" src="..." />

    to use images instead of text. Works so far.
    For any reason the menu images jump away, when i try to hover them. Could you please check?

    Also they have a too big spacing between each other?

    I also would like to add a nice fading, when hovering the menu-mages?

    How can i fix that?

    kind regards Jak

    March 10, 2022 at 5:09 am #1343943
    Ismael

    Hi,

    Thank you for the update.

    You can use this css code to prevent the hover images from jumping when they are active.

    #top #header_main > .container .main_menu .av-main-nav > li > a {
    min-width: 200px;
}

#top #header_main > .container .main_menu .av-main-nav > li > a > .avia-menu-text img {
    position: absolute;
}

    Best regards,
    Ismael

    March 10, 2022 at 10:05 am #1343975
    Jak73

    Hi Ismael,

    really good!!! Thank you!!!

    How can i add a hover-fading to the menu buttons?

    I would like to have a little more space between the top of the page and the menu-buttons?

    How can i do that?

    Kind regards Jak

    March 10, 2022 at 2:52 pm #1344007
    Yigit

    Hi,

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
#top #header_main > .container .main_menu .av-main-nav > li > a > .avia-menu-text img {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
@media only screen and (min-width: 990px) { 
.av-main-nav-wrap {
  margin-top: 20px;
}}

    Best regards,
    Yigit

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