Support » Theme: Customizr » Fade effect with hover activated menu / Table bgcolor

  • 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 plugin while clicking. Another problem that i have is on the portfolio page. there i used a table and it automatically has 2 colors as bgcolors assigned and i cant change them .. really weird.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Can you link to your site (and the table page link)?

    Thread Starter n3v3rm1nd

    (@n3v3rm1nd)

    oh sorry theres my page : http://www.emotionsphotography.de

    and i resolved the issue with the table colors with using the bootstrap grid system !

    Hmm. Not sure I understand your first question. Could you try explaining it again? What does it do that you don’t want it to do, or what doesn’t it do that you want it to do?

    Thread Starter n3v3rm1nd

    (@n3v3rm1nd)

    Yes of course. In the Menu there is a Dropdown menu that opens up when you hover over it with the mouse that i used the code above. The only problem that i cant get it fade when you hover over it.

    Another quick question : How to style the footer with a background ? Had it working but after the update i forgot what i changed .. ^^

    So you mean that you want people to get the dropdown submenu when they hover, but then then you want it to slowly disappear (=”fade”)?

    Thread Starter n3v3rm1nd

    (@n3v3rm1nd)

    yes youre right .. i addes varios css3 transition etc. effects to the dropdown menu and it just didnt work when you hover over it ..

    Sorry: beyond my skill level…

    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.

    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 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Fade effect with hover activated menu / Table bgcolor’ is closed to new replies.