Return to previous page

Reply 337753 to: Facing issue with 3rd level xStore flyout menu

Avatar: DS
DS
Participant
November 2, 2022 at 17:12

After adding the above code, the following code stopped working. If there is no space on the right side then the default xStore menu is going outside the screen https://snipboard.io/8GV1zJ.jpg
and following the code change the menu directly to the left side if no space in the right side.

add_action( 'wp_footer', 'menu_fix_scripts' );
function menu_fix_scripts(){
  ?>
  <script>
      function check_menu(){
    document.querySelectorAll('.menu-main-container .nav-sublist').forEach(function(ele){        
        const rect=ele.children.item(0).getBoundingClientRect();
        const total_width=parseInt(rect.x)+parseInt(rect.width);
        if(total_width>(window.innerWidth))
        {
            ele.style.position="absolute";
            ele.style.right="200%";
            ele.style.width='100%';
            ele.style.top='0px';
            ele.style.zIndex='99999 !important';
            ele.style.background="#fff";console.log(total_width+"--"+window.innerWidth+"--"+rect.x);
            const style=document.createElement('style');
            style.innerHTML=".menu-main-container .nav-sublist ul{ z-index: 9 !important;}";
            document.head.appendChild(style);

        }
        
    });
}
function addHandler(){
if(window.innerWidth>768){
document.querySelectorAll('.menu-main-container li.menu-item-has-children').forEach(function(pli){

        pli.addEventListener('mouseover',function(){
            check_menu();

        })
})
}
}
window.onload=addHandler();
//window.onresize=addHandler();
  </script>

  <?php
}
#337753
Go To The Whole Conversation In Topic

Useful links WooCommerce & WordPress

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.