Lo que lograremos: 

Para esto, debemos crear nuestra plantilla de Header con Elementor y configurar el Sticky Top:

Además debes agregarle la clase header a tu sección que contiene el menu.

Luego vamos a agregar los estilos CSS en la hoja de estilos style.css:

				
					.header {
	transition: .6s !important;
	min-width: 100% !important;
}

.header.scrolled {
	background: #0A0A0A; /*o el color que quieras*/
}

Ahora agregamos algunas librerías importantes en nuestro function.php

Probablemente en tu tema ya tengas la función que llama a las hojas de css y js, así que, si es el caso, solo agrega las líneas 6 y 7 a tu función.

Las librerías siempre deben llamarse antes que tu hoja js donde estará el código que hace la magia.

				
					// AGREGAR CUTOM JS/CSS
function add_scripts_proyecto() {
	
	$rand = rand(0, 999999999);
	
	wp_enqueue_script( 'script_gsap', '//cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js', array ( 'jquery' ));
	wp_enqueue_script( 'script_gsapscroll', '//cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js', array ( 'jquery' ));
	wp_enqueue_script( 'script_custom', get_stylesheet_directory_uri() . '/custom.js', array ( 'jquery' ), $rand);
	
	// CSS
    wp_enqueue_style( 'chld_thm_cfg_child', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css', array( 'hello-elementor','hello-elementor','hello-elementor-theme-style' ), $rand );
	
    wp_localize_script( 'script_custom', 'proyecto', [
        'is_mobile' => intval( wp_is_mobile() ),
    ]);
}
add_action( 'wp_enqueue_scripts', 'add_scripts_proyecto' );

Ahora agregamos el JS en la hoja de javascrip que estés usando:

				
					$(window).on('load', function() {
		setTimeout(function() {
			scrollHeaderToggle();
		}, 1000)
	})

function scrollHeaderToggle() {
		let lastScrollTop = 0;
		const header = document.querySelector('.elementor-sticky.header');

		const height = header.offsetHeight + 10;
		window.addEventListener('scroll', function () {
			let st = window.pageYOffset || document.documentElement.scrollTop;

			// Check if the page is scrolled
			if (st > 0) {
				// Add a class when scrolled
				header.classList.add('scrolled');
			} else {
				// Remove the class when at the top
				header.classList.remove('scrolled');
			}

			// Check scroll direction
			if (st > lastScrollTop) {
				header.style.top = -height + 'px';
			} else {
				header.style.top = '0';
			}

			lastScrollTop = st;
		});

		window.dispatchEvent(new CustomEvent('scroll'))
}

Y listo!