[Support request] Navigation Menu Breaks when using custom menu hamburger icon

Home Forums Support [Support request] Navigation Menu Breaks when using custom menu hamburger icon

Home Forums Support Navigation Menu Breaks when using custom menu hamburger icon

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #879722
    Roberto

    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,

    #879768
    Tom
    Lead Developer
    Lead Developer

    You have an extra closing </div> element in your first function:

    <div>
        <div class="bar-right"></div>
        <div class="bar-right"></div>
        <div class="bar-right"></div>
      </div>
    </div>

    You need to either remove one of the </div> elements, or add another <div> element at the start.

    Let me know 🙂

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.