Elementor - Make Nav Menu Toggle Animated

functions.php

This snippet filters the content of the Elementor Nav Menu Widget to
add the required markup for the animated toggle (3 spans).

function replaceMenuToggleContent($html) {
    // Wrap the HTML with a root element to prevent unexpected restructuring
    $dom = new DOMDocument();
    libxml_use_internal_errors(true);
    $dom->loadHTML('<div>' . $html . '</div>', LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
    libxml_clear_errors();

    // Find the div with class "elementor-menu-toggle"
    $xpath = new DOMXPath($dom);
    $nodes = $xpath->query("//div[contains(@class, 'elementor-menu-toggle')]");

    foreach ($nodes as $node) {
		
        // Create the wrapper div
        $wrapperDiv = $dom->createElement("div");
        $wrapperDiv->setAttribute("class", "animated-menu-toggle__wrapper");

        // Add the three empty spans inside the wrapper
        for ($i = 0; $i < 3; $i++) {
            $span = $dom->createElement("span");
            $wrapperDiv->appendChild($span);
        }

        // Add the wrapper div to the node
        $node->appendChild($wrapperDiv);

        // Add the new class "animated-menu-toggle"
        $node->setAttribute('class', $node->getAttribute('class') . ' animated-menu-toggle');
    }

    // Extract and return the innerHTML of the root <div> we added
    $rootDiv = $dom->getElementsByTagName('div')->item(0);
    $result = '';
    foreach ($rootDiv->childNodes as $child) {
        $result .= $dom->saveHTML($child);
    }

    return $result;
}

add_filter('elementor/widget/render_content', function($widgetContent, $widget){

	if($widget->get_name() === "nav-menu"){
		$widgetSettings = $widget->get_settings_for_display();
		$widgetId = $widgetSettings['_element_id'];
		$targetWidgetId = "animatedMenuToggle";
		if($widgetId === $targetWidgetId){
			return(replaceMenuToggleContent($widgetContent));
		}
	}

	return $widgetContent;

}, 10, 2);

add_action('wp_head', function(){
	ob_start();
	?>
		<style>
			.elementor-menu-toggle.animated-menu-toggle .animated-menu-toggle__wrapper span {
			height: 1px;
			background-color: #269F39;
			transition: 0.5s;
			z-index: 999;
			width: 100%;
		}

		.elementor-menu-toggle.animated-menu-toggle .animated-menu-toggle__wrapper {
			cursor: pointer;
			width: 16px;
			height: 16px;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			padding: 0 !important;
		}

		.elementor-menu-toggle.animated-menu-toggle > :not(.animated-menu-toggle__wrapper){
			display: none !important;
		}

		.elementor-menu-toggle.animated-menu-toggle.elementor-active > span {
			background-color: #fff;
		}

		.elementor-menu-toggle.animated-menu-toggle.elementor-active .animated-menu-toggle__wrapper span:nth-child(1) {
			transform: translateY(7.5px) rotate(45deg);
		}

		.elementor-menu-toggle.animated-menu-toggle.elementor-active .animated-menu-toggle__wrapper span:nth-child(2) {
			opacity: 0;
		}

		.elementor-menu-toggle.animated-menu-toggle.elementor-active .animated-menu-toggle__wrapper span:nth-child(3) {
			transform: translateY(-7.5px) rotate(-45deg);
		}
	</style>
	<?php
	echo ob_get_clean();
});