Navigation Menu Breaks when using custom menu hamburger icon

Hi Tom,

can you kindly assist me with an issue I'm having?

I installed a custom hamburger menu icon on the following website under development: http://greenhillsbelize.flywheelsites.com

please see screenshot of the issue - the navigation menu items appear on a different line than the logo:

https://pasteboard.co/IbQ5bTl.png

This is my html code I added using snippets;

add_action( 'generate_inside_mobile_menu', 'tu_custom_mobile_menu' );
add_action( 'generate_inside_mobile_header_menu', 'tu_custom_mobile_menu' );
function tu_custom_mobile_menu() {
?>
  <div>
    <div class="bar-right"></div>
    <div class="bar-right"></div>
    <div class="bar-right"></div>
  </div>
</div>
<?php
}

this is my Javascript added using snippets;

add_action( 'wp_footer', function () { ?>
	<script>
	var menuRight = document.getElementById("menu-right");
menuRight.addEventListener("click", function() {
  this.classList.toggle("active");
});
	</script>
<?php } );

this is the CSS used to style it;

.bar-right{
  float: right;
  width: 34px;
  height: 2px;
  background-color: #000000;
  transition: all 0.4s ease-in-out;
}

.bar-right:nth-of-type(2){
  width: 25px;
  margin: 7px 0;
}

#menu-right.active .bar-right:nth-of-type(2){
  opacity: 0;
}

#menu-right.active .bar-right:nth-of-type(1){
  transform: translateY(9px) rotate(-45deg);
}

#menu-right.active .bar-right:nth-of-type(3){
  transform: translateY(-9px) rotate(45deg);
}

can you kindly assist me in figuring out whats causing this in DESKTOP view? mobile works perfectly.

thank you,