Return to previous page

Facing issue with 3rd level xStore flyout menu

This topic has 7 replies, 2 voices, and was last updated 2 years ago ago by DS

Participant

November 2, 2022 at 10:58

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

Copied Theme version: 8 WooCommerce version: 7

6 Answers

Rose Tyler

Support staff

November 2, 2022 at 14:06

Hello,

Please provide temporary wp-admin access.

Regards

Copied

Participant

November 2, 2022 at 14:24

Please check

Copied

Rose Tyler

Support staff

November 2, 2022 at 16:53

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

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
}

Copied

Rose Tyler

Support staff

November 3, 2022 at 15:30

Hello,

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

Regards

Copied

Participant

November 3, 2022 at 15:55

hi,

yes it’s working now

Copied

Tagged: 3rd level issue, flyout menu, seo friendly, solve issue, woocommerce, wordpress, xstore
Viewing 7 results - 1 through 7 (of 7 total)

The issue related to '‘Facing issue with 3rd level xStore flyout menu’' has been successfully resolved, and the topic is now closed for further responses

Facing issue with 3rd level xStore flyout menu

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection