Menu Toggle on Mobile not working

Hello, thank you for your quick reply. greatly appreciated. Unfortunately, this didn’t work for me it was still inactive. I noticed when the Mega Menu is turned off, elementor toggles the “elementor-menu-toggle” class to “elementor-menu-toggle elementor-active” then the normal menu appears.
See below:

<div class="elementor-menu-toggle">
   <i class="eicon" aria-hidden="true"></i>
   <span class="elementor-screen-only">Menu</span>
</div>

Goes to:

<div class="elementor-menu-toggle elementor-active">
   <i class="eicon" aria-hidden="true"></i>
   <span class="elementor-screen-only">Menu</span>
</div>

I tried many combinations of this and your suggestion without any luck.
Any ideas? Thanks again

Hi Zootemplate, this worked a treat thank you. It all works fine now. the only thing on the admin side, which may be for consideration when you are updating.

The WordPress Navigation Widget just puts a bulleted list into the top nav inside the Elementor Template. This looks fine when editing and looking at Elementor Pages/Posts, just not in the template.
https://prnt.sc/o36yw7

Also when on mobile size I couldn’t see a way to use the default elementor font I had chosen in my theme plus I wanted to align the hamburger to the right of the container it was within, so I just added some css to the Navigation Widget with a custom class (although I am not that keen on using floats, was just the first thing that worked)

selector {font-family: "Lato", Sans-serif;}

@media (max-width: 767px){
.custom-mob-nav .elementor-widget-container{float:right;}
}

Thanks again.