From Fredrik Westerlund, 1 Year ago, written in CSS.
Embed
  1. /*
  2. Tailor the sticky colors & transition effects on GeneratePress menu
  3. Remove the lines you don't need, but please test it all before removing.
  4. Save this link for future references
  5. */
  6.  
  7. /* transition the background/creates the fade effect 0.8 seconds */
  8. nav.main-navigation {transition: background 0.8s;}
  9.  
  10. /* change colors of menu on hover */
  11. nav.main-navigation:hover {background: rgba(255,255,255, 0.8) !important;} /* change background color on entire menu on hover */
  12. nav.main-navigation:hover .main-nav ul li a {color: #3181BE;} /* change text color when hovering the menu */
  13.  
  14. /* change menu apperance on sticky menu */
  15. nav.main-navigation.navigation-stick {background: rgba(255,255,255, 0.8);} /* menu background color on sticky */
  16. nav.main-navigation.navigation-stick .main-nav ul li a {color: #3181BE;} /* change text color on sticky menu */
  17.  
  18. /* normal menu toggled on mobile */
  19. nav.main-navigation.toggled {background: #ffffff !important;} /* set new background color when toggled */
  20. nav.main-navigation.toggled .main-nav ul li a {color: #3181BE;} /* change text color for dropdown */
  21.  
  22. /* menu-toggle button color */
  23. nav.main-navigation .menu-toggle {color:#f7f7f7;} /* normal toggle-button color */
  24. nav.main-navigation.toggled .menu-toggle {color: #3181BE;} /* change toggle button color after pressed*/
  25. nav.main-navigation.navigation-stick .menu-toggle {color: #3181BE;} /* changes the color on sticky */
  26.  
  27. nav.main-navigation .main-nav ul li:hover {border-bottom: 2px solid #3181BE;} /* adds a border on bottom of menu item when hover */
  28.  
  29. /* slide-out menu navigation colors */
  30. nav.main-navigation.slideout-navigation {background: #ffffff !important;} /* set new background color when opened */
  31. nav.main-navigation.slideout-navigation .main-nav ul li a {color: #3181BE;} /* change text color for slide-out*/