1<style>
  2    /* Configurable Variables */
  3    :root {
  4        --bar-width: 30px; /* Width of all bars */
  5        --bar-height: 2px; /* Height/Thickness of all bars */
  6        --bar-color: #000; /* Default color of bars */
  7        --hover-color: #ff0050; /* Color on hover */
  8        --active-color: #0000ff; /* Color when the menu is active (close icon) */
  9        --bar-gap: 8px; /* Gap between bars */
 10 
 11        --bg-normal: #fff; /* Background color when idle */
 12        --bg-hover: #fff; /* Background color on hover */
 13        --bg-active: #fff; /* Background color when active */
 14    }
 15 
 16    /* Hide Elementor's default open and close icons */
 17    .elementor-menu-toggle__icon--open,
 18    .elementor-menu-toggle__icon--close {
 19        display: none;
 20    }
 21 
 22    /* Custom styles for the toggle button */
 23    .elementor-menu-toggle {
 24        position: relative;
 25        width: var(--bar-width);
 26        height: calc(var(--bar-height) * 3 + var(--bar-gap) * 2); /* Ensure height includes bars and gaps */
 27        cursor: pointer;
 28        background-color: var(--bg-normal); /* Default background color */
 29        transition: background-color 0.3s ease;
 30    }
 31 
 32    /* Top, middle, and bottom bars using pseudo-elements */
 33    .elementor-menu-toggle:before,
 34    .elementor-menu-toggle:after,
 35    .elementor-menu-toggle .middle-bar {
 36        content: '';
 37        display: block;
 38        width: 100%;
 39        height: var(--bar-height);
 40        background-color: var(--bar-color);
 41        position: absolute;
 42        left: 0;
 43        transition: all 0.3s ease;
 44    }
 45 
 46    /* Top bar */
 47    .elementor-menu-toggle:before {
 48        top: 0; /* Position at the top */
 49    }
 50 
 51    /* Middle bar */
 52    .elementor-menu-toggle .middle-bar {
 53        top: 50%; /* Center the middle bar */
 54        transform: translateY(-50%);
 55    }
 56 
 57    /* Bottom bar */
 58    .elementor-menu-toggle:after {
 59        bottom: 0; /* Position at the bottom */
 60    }
 61 
 62    /* Hover state: change the color of the bars and background to hover color */
 63    .elementor-menu-toggle:hover {
 64        background-color: var(--bg-hover);
 65    }
 66 
 67    .elementor-menu-toggle:hover:before,
 68    .elementor-menu-toggle:hover:after,
 69    .elementor-menu-toggle:hover .middle-bar {
 70        background-color: var(--hover-color);
 71    }
 72 
 73    /* When the menu is active: change background color and transform top/bottom bars to form an 'X' */
 74    .elementor-menu-toggle.elementor-active {
 75        background-color: var(--bg-active);
 76    }
 77 
 78    .elementor-menu-toggle.elementor-active:before {
 79        transform: translateY(calc(var(--bar-gap) + var(--bar-height))) rotate(45deg); /* Rotate top bar */
 80        background-color: var(--active-color);
 81    }
 82 
 83    .elementor-menu-toggle.elementor-active:after {
 84        transform: translateY(calc(-1 * (var(--bar-gap) + var(--bar-height)))) rotate(-45deg); /* Rotate bottom bar */
 85        background-color: var(--active-color);
 86    }
 87 
 88    .elementor-menu-toggle.elementor-active .middle-bar {
 89        opacity: 0; /* Hide middle bar when active */
 90    }
 91</style>
 92 
 93<script>
 94jQuery(document).ready(function($) {
 95    // Check if the menu toggle exists
 96    if ($('.elementor-menu-toggle').length) {
 97        // Append the middle bar span inside the menu toggle
 98        $('.elementor-menu-toggle').append('<span class="middle-bar"></span>');
 99    }
100});
101</script>