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,