Okay
  Public Ticket #2481409
Mobile menu submenu items dropdown glitch
Closed

Comments

  • Sandipbarik started the conversation
    July 22, 2020 at 4:41pm

    I have some sub menus in the mobile menu item of the template, but the dropdown and retract animation has a glitch where the menu item jumps up before retracting ( Please check attached gif). 

    Please advise on how to solve this issue. Waiting for a fast reply from your end.

    Thanks

  •  213
    Ali replied
    July 23, 2020 at 11:53am

    Hello,

    Go to https://purpleguide.in/wp-content/themes/embe/assets/css/style.css

    And try this:

    1. Line 702:

    .mobi-menu li {

        line-height: 1;
        position: relative;
        padding: .8rem 0;
    }

    2. Line 698:

    .mobi-menu ul.sub-menu {
        max-height: 0;
        padding: 0;
        overflow: hidden;
        list-style-type: none;
        transition: max-height 0.5s ease-out;
        position: relative;
        min-width: 100%;
        margin-top: 1rem;
    }

    Thanks.


  • Sandipbarik replied
    July 23, 2020 at 1:34pm

    Thanks for your reply, the css settings solved the animation issue.

    But now there is unwanted extra space between the menu item which has sub menu ( screenshot attached)

  •  213
    Ali replied
    July 27, 2020 at 1:32am

    Hello, so kindly try this  CSS code in style.css file:

    1. Line 689:

    .mobi-menu ul.sub-menu {
        height: 0;
        padding: 0;
        overflow: hidden;
        list-style-type: none;
        transition: height 0.5s ease-out;
        position: relative;
        min-width: 100%;
    }

    2. Line 695:

    .mobi-menu .open-submenu ul.sub-menu {
        height: auto;
        transition: height 0.5s ease-in;
        margin-top: 1rem;
    }

    Thanks.