CSS Stops working once site is published

Hello,

I have custom css to create a burger menu on desktop. This works while the site is in edit mode, however as soon as it is published, the burger menu displays but will not open the nav bar menu. Any help is appreciated! Code below:

EDIT: Upon further inverstigation, it is the JS below that breaks the menu, it works without the menu being moved next to the language picker.

@media only screen and (min-width: 760px) {
  
 	.header-burger {
		display:flex!important;
      	margin: 12px!important;
  	} 
  
	.header-nav {display:none!important}
  
	.header--menu-open .header-menu {
      display: flex!important; 
      opacity: 1!important; 			  
      visibility:visible!important;
  	}
  
  
	.header-menu-actions {
      display: none;
  	}
 
  
  	.header-menu-cta {
		display: none;
	}
  
	.header-menu-nav-item a {
    	font-size: 45px;
    	line-height: .8;
	}
}

<script>
  $(document).ready(function() { 
		$('.header-display-desktop .header-burger').insertAfter('.language-picker-desktop');
	});
</script>

What is your site url? We can check problem easier

Oh gosh, so sorry I didn't include it and the late response. It is okapiconservation.org

Thanks @tuanphan you're a legend!

On 2/10/2023 at 4:31 AM, Cancid said:

Oh gosh, so sorry I didn't include it and the late response. It is okapiconservation.org

Thanks @tuanphan you're a legend!

Hi,

It is fine to me. Click burger >> still open menu.

You can check again

Hey @tuanphan,

It does open rn on the live site, however we original had it moved over to be left of the "Contribute" button. I can successfully move it there and it works while the site is in edit mode, however on the live site the button becomes unclickable.