Fade on Menu Hover

  • Resolved notbadstudio

    (@notbadstudio)


    4 years, 3 months ago

    Hello,

    I would like my menu hover effect to fade in rather than instantly snap to white, how would I go about this with CSS.

    Here is my current CSS

    @media only screen and (min-width: 992px) {
    .site-header:hover {
    background-color: #fff;
    }

    • This topic was modified 4 years, 3 months ago by notbadstudio.
    • This topic was modified 4 years, 3 months ago by notbadstudio.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Kharis Sulistiyono

    (@kharisblank)

    4 years, 3 months ago

    @notbadstudio thank you for raising this topic!

    Please try this code to replace the old one:

    @media only screen and (min-width: 992px) {
  
  .site-header {
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;    
  }  
  .site-header:hover {
    background-color: #fff;
  }
  
}

    Hope that works for you.

    Regards,
    Kharis

    Thread Starter notbadstudio

    (@notbadstudio)

    4 years, 3 months ago

    Perfect mate, you’re a star 🙂

    Kharis Sulistiyono

    (@kharisblank)

    4 years, 3 months ago

    You’re welcome!

    Could you leave us a positive review here if you don’t mind?

    Regards,
    Kharis

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

The topic ‘Fade on Menu Hover’ is closed to new replies.