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, 1 months ago ago by DS

  • Avatar: DS
    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

    Please, contact administrator
    for this information.
    #337714 Copied Theme version: 8 WooCommerce version: 7
    6 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 2, 2022 at 14:06

    Hello,

    Please provide temporary wp-admin access.

    Regards

    #337729 Copied
    Avatar: DS
    DS
    Participant
    November 2, 2022 at 14:24

    Please check

    Please contact administrator
    for this information.
    #337733 Copied
    Avatar: Rose Tyler
    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

    #337751 Copied
    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 Copied
    Avatar: Rose Tyler
    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

    #337818 Copied
    Avatar: DS
    DS
    Participant
    November 3, 2022 at 15:55

    hi,

    yes it’s working now

    #337819 Copied

  • Tagged: , , , , , ,

  • 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

Helpful Topics

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Furniture Store 03 – WordPress WooCommerce Theme
lazy-placeholder
Barbershop – WordPress WooCommerce Theme
lazy-placeholder
Mobile Store – WordPress WooCommerce Theme
lazy-placeholder
Marketing – WordPress WooCommerce Theme
lazy-placeholder
Mango – Responsive eCommerce PSD Template
lazy-placeholder
Phone Service – WordPress WooCommerce Theme
lazy-placeholder
Minimalist Outfits – WordPress WooCommerce Theme
lazy-placeholder
Shoes Store – WooCommerce Theme
lazy-placeholder
Electronic Mega Market – WordPress WooCommerce Theme
lazy-placeholder
Web Agency – WordPress WooCommerce Theme

See All Templates

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