Facing issue with 3rd level xStore flyout menu

This topic has 7 replies, 2 voices, and was last updated 1 year, 4 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.
    6 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 2, 2022 at 14:06

    Hello,

    Please provide temporary wp-admin access.

    Regards

    Avatar: DS
    DS
    Participant
    November 2, 2022 at 14:24

    Please check

    Please contact administrator
    for this information.
    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

    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
    }
    
    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

    Avatar: DS
    DS
    Participant
    November 3, 2022 at 15:55

    hi,

    yes it’s working now

  • 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

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