[Theme Customizr] Fade effect with hover activated menu

  • hy there .. is just lookes an hour long for a solution to my problem. I’m using this code to make the dropdwon menu hover on mouse over that i found via the faq : 

    /*make the menu sub-menu items drop down on mouse hover */
ul.nav li.dropdown:hover > ul.dropdown-menu{
    display: block;
    margin: 0;

}

    I can’t make it to work that the menu fill fade in and out. Without hover activation it fades while using CSS3 transitions. That’s my website if needed :

    Thank you !

Viewing 1 replies (of 1 total)
  • jotunn

    (@jotunn)

    ul.nav li.dropdown > ul.dropdown-menu{
    opacity:0;
    margin: 0;
    visibility:hidden;
    display:block;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    }
    ul.nav li.dropdown:hover > ul.dropdown-menu{
    visibility:visible;
    opacity:1;
    display: block;
    margin: 0;
    }

    does it for me. The first code displays it but at opacity 0 and hidden (so it doesn’t become visible if you move your mouse to where the menu will pop up). It also sets it to change the opacity via fade.

    The second makes it visible (so you can see and interact with it) and sets the opacity to 1.

    edit.
    Adding @media (min-width: 480px) { } around both tags can be good to make it display correctly on mobile devices.

Viewing 1 replies (of 1 total)
  • The topic ‘[Theme Customizr] Fade effect with hover activated menu’ is closed to new replies.