Slide Effect ON, sub-menu vertical positionning wrong

Home Forums Pro Support Slide Effect ON, sub-menu vertical positionning wrong

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #66826
    Olivier SarfatiOlivier Sarfati
    Participant

    Hi,

    I try to align my sub-menus to the top of the menu but they are actually aligned with their parent, not the menu itself.
    I try to recreate your example > https://demo.responsive.menu/pro-example-one/

    You can seen the WIP website at dev.niiuvapor.com

    Thanks a lot

    #66838
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Olivier,

    I’ve just been on your site and can’t see any reason for it. Have you added any custom CSS?

    Have you tried switching themes to see if it’s the theme conflicting or tried disabling other plugins?

    Please let me know

    Peter

    #66837
    Olivier SarfatiOlivier Sarfati
    Participant

    Thx for you reply.

    I have just tried with a twenty-something theme, as you can see online, and it works fine. (unfortunately for me…) For my website, I use a bought theme called Hazel that uses WP Bakery. Do you know where I have to search to find a solution to my problem (css, js… can’t find any where…) ?

    In fact, my client (called Olivier, my name is Hervé) ,wanted this theme but a menu like yours, with slide panel activated.

    #66836
    Olivier SarfatiOlivier Sarfati
    Participant

    Here is my custom CSS


    #responsive-menu-pro-container {
    z-index: 100000;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    }
    #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item .responsive-menu-pro-item-link {
    font-family: "Quicksand" !important;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    }

    #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a .responsive-menu-pro-subarrow {
    line-height: 54px;
    }

    .responsive-menu-pro-back img {
    transform: rotate(180deg);
    }

    #responsive-menu-pro-container #responsive-menu-pro .responsive-menu-pro-back,
    #responsive-menu-pro-container #responsive-menu-pro > li.responsive-menu-pro-item:first-child > a {
    border-top: none;
    }

    #responsive-menu-pro-container li.fa.responsive-menu-pro-item a {
    padding-left: 51px;
    position: relative;
    }
    #responsive-menu-pro-container li.fa.responsive-menu-pro-item:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 27px;
    z-index: 1;
    }
    #responsive-menu-pro-container .wpml-ls-flag {
    margin-right: 10px;
    }

    #66835
    Peter FeatherstonePeter Featherstone
    Participant

    Hi Olivier,

    It’s likely in the theme CSS somewhere but could also be in the JS if the themes JS is manipulating layout/styling of the site.

    If it works on a default theme then it’s likely not your Custom CSS.

    Have you reached out to the theme developers to see if they can understand why it’s happening?

    Please let me know

    Peter

    #66834
    Olivier SarfatiOlivier Sarfati
    Participant

    (sorry I hit reply too fast).

    The wrong positionning definetely comes from the theme Hazel, because when I remove all custom css, the problem is still here.

    #66833
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Olivier,

    Yeah I can see that based on the fact that it worked on the default theme with your CSS.

    You will need to try and debug what CSS or JS is causing it in the theme or reach out to their devs to see if they can give you any pointers.

    Please let me know how you get on.

    Peter

    #66832
    Olivier SarfatiOlivier Sarfati
    Participant

    Unfortunately for me, the other support are very slooooower than you.
    As they have not answered yet, can you check with me what’s wrong and where the “shit happen” ?

    Apparently, changing the “display” the parent li could be a part of the solution.
    #responsive-menu-pro-container li.responsive-menu-pro-item { display: contents; }

    #66831
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Olivier,

    I’m not sure I can debug the whole of the theme you are using on their behalf because they are too slow.

    I had a look yesterday and couldn’t find anything obvious in their CSS that would mean it wouldn’t work. I expect as you say it’s likely a positioning thing around the parent items.

    It works by having an absolute positioning with a top of 0 on the sub menus so somewhere along the parent tree the theme is overwriting something.

    All the best

    Peter

    #66830
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Olivier,

    I’ve had another play around on your site and can you try adding the below Custom CSS:

    .responsive-menu-pro-subarrow-active {
       position: absolute !important;
       top: 0 !important;
    }

    Please let me know if that helps at all.

    Peter

    #66829
    Olivier SarfatiOlivier Sarfati
    Participant

    It almost do the job.
    As you can see, adding this to the css correct the submenu but the parent button move at the top, over the first item. It would not be a problem if it get back to its original posision when hitting “back”.

    Image to understand the pb.

    #66828
    Olivier SarfatiOlivier Sarfati
    Participant

    Hi Peter,

    Adding this makes the menu works like I want.

    jQuery(document).ready(function( $ ){
    jQuery(".responsive-menu-pro-back").click(function(event){
    jQuery(this).parent().parent().removeClass("responsive-menu-pro-subarrow-active");
    })
    });

    For now I will use this solution. If I have an answer from the theme support, I’ll tell you.
    Thanks for your plugin and time.

    #66827
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Olivier,

    Excellent and thanks for letting me know.

    All the best

    Peter

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Slide Effect ON, sub-menu vertical positionning wrong’ is closed to new replies.