Return to previous page

Topic: Facing issue with 3rd level xStore flyout menu

Participant

November 2, 2022 10:58 am

hi,

can you please check the SHOP menu on my website?
On my website there are three menus that have third level flyout and all are open below each other see the screenshot Screenshot https://snipboard.io/GIneRY.jpg

Menu tree

SHOP –> Books –> English —> Categories

These menu under Books have 3rd level flyout menu English, Hindi and Marathi

Theme version: 8

WooCommerce version: 7

copied to clipboard

Rose Tyler

Support staff

November 2, 2022 2:06 pm

Hello,

Please provide temporary wp-admin access.

Regards

copied to clipboard

Participant

November 2, 2022 2:24 pm

Please check

copied to clipboard

Rose Tyler

Support staff

November 2, 2022 4:53 pm

Hello,

Try to add the next code in Theme options > Theme custom CSS > Global:

.item-design-dropdown .nav-sublist-dropdown ul ul>li.menu-parent-item>a:after {
content: "\e904";
font-size: 60%;
font-family: xstore-icons;
position: absolute;
right: 2.5em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.item-design-dropdown .nav-sublist-dropdown ul ul li.menu-parent-item:hover>.nav-sublist {
display: block;
}
.item-design-dropdown .nav-sublist-dropdown ul ul li.menu-parent-item>.nav-sublist {
display: none;
}
.item-design-dropdown .nav-sublist-dropdown ul ul li.menu-parent-item>.nav-sublist {
position: static !important;
width: auto !important;
background: transparent !important;
}

Regards

copied to clipboard

Participant

November 2, 2022 5:12 pm

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
}

copied to clipboard

Rose Tyler

Support staff

November 3, 2022 3:30 pm

Hello,

Please delete this part of the code and check then – https://prnt.sc/1NRjYU1a6W2K

Regards

copied to clipboard

Participant

November 3, 2022 3:55 pm

hi,

yes it’s working now

copied to clipboard

Viewing 7 results

1 through 7 (of 7 total)

The topic ‘Facing issue with 3rd level xStore flyout menu’ is closed to new replies.

Topic: Facing issue with 3rd level xStore flyout menu

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Did you know ?

Happy Customers