Menu above built with this plugin including Mega Menu.

Slide Effect ON, sub-menu vertical positionning wrong

This topic contains 12 replies, has 2 voices, and was last updated by  Peter Featherstone 3 weeks, 3 days ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #61894 Reply

    Olivier 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

    #61896 Reply

    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

    #61897 Reply

    Olivier 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.

    #61898 Reply

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

    #61899 Reply

    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

    #61900 Reply

    Olivier 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.

    #61901 Reply

    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

    #61924 Reply

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

    #61926 Reply

    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

    #61928 Reply

    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

    #61933 Reply

    Olivier 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.

    #61938 Reply

    Olivier 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.

    #61939 Reply

    Hey Olivier,

    Excellent and thanks for letting me know.

    All the best

    Peter

Viewing 13 posts - 1 through 13 (of 13 total)
Reply To: Slide Effect ON, sub-menu vertical positionning wrong
Your information:





<a href="" title="" rel="" target=""> <blockquote cite=""> <code> <pre> <em> <strong> <del datetime=""> <ul> <ol start=""> <li> <img src="" border="" alt="" height="" width="">

Responsive Menu Title Image
Responsive Menu
No coding knowledge needed