offcanvas-menu.css 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. .wp-block-srh-offcanvas-menu {
  2. position: relative;
  3. }
  4. .hamburger-toggle {
  5. display: flex;
  6. flex-direction: column;
  7. justify-content: space-between;
  8. width: 30px;
  9. height: 20px;
  10. background: none;
  11. border: none;
  12. padding: 0;
  13. cursor: pointer;
  14. }
  15. .hamburger-toggle span {
  16. display: block;
  17. width: 100%;
  18. height: 2px;
  19. background-color: #ffffff;
  20. transition: all 0.3s ease;
  21. }
  22. .hamburger-toggle.is-active span:nth-child(1) {
  23. transform: translateY(9px) rotate(45deg);
  24. }
  25. .hamburger-toggle.is-active span:nth-child(2) {
  26. opacity: 0;
  27. }
  28. .hamburger-toggle.is-active span:nth-child(3) {
  29. transform: translateY(-9px) rotate(-45deg);
  30. }
  31. .offcanvas-menu {
  32. position: fixed;
  33. top: 0;
  34. right: -300px;
  35. width: 300px;
  36. height: 100vh;
  37. background-color: #fff;
  38. box-shadow: -2px 0 5px rgba(0,0,0,0.1);
  39. transition: right 0.3s ease;
  40. z-index: 1000;
  41. }
  42. .offcanvas-menu.is-active {
  43. right: 0;
  44. }
  45. .offcanvas-menu-inner {
  46. padding: 20px;
  47. }
  48. body.offcanvas-active {
  49. overflow: hidden;
  50. }