Slide Effect ON, sub-menu vertical positionning wrong
Home › Forums › Pro Support › Slide Effect ON, sub-menu vertical positionning wrong
- This topic has 13 replies, 2 voices, and was last updated 4 years, 8 months ago by Olivier Sarfati.
-
AuthorPosts
-
July 30, 2019 at 4:42 pm #66826Olivier SarfatiParticipant
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
July 30, 2019 at 6:29 pm #66838Peter FeatherstoneParticipantHey 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
July 30, 2019 at 6:35 pm #66837Olivier SarfatiParticipantThx 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.
July 30, 2019 at 6:39 pm #66836Olivier SarfatiParticipantHere 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;
}
July 30, 2019 at 6:41 pm #66835Peter FeatherstoneParticipantHi 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
July 30, 2019 at 6:42 pm #66834Olivier SarfatiParticipant(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.
July 30, 2019 at 7:13 pm #66833Peter FeatherstoneParticipantHey 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
July 31, 2019 at 10:15 am #66832Olivier SarfatiParticipantUnfortunately 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; }
July 31, 2019 at 11:32 am #66831Peter FeatherstoneParticipantHey 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
July 31, 2019 at 11:40 am #66830Peter FeatherstoneParticipantHey 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
July 31, 2019 at 1:34 pm #66829Olivier SarfatiParticipantIt 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.
July 31, 2019 at 2:30 pm #66828Olivier SarfatiParticipantHi 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.July 31, 2019 at 2:52 pm #66827Peter FeatherstoneParticipantHey Olivier,
Excellent and thanks for letting me know.
All the best
Peter
-
AuthorPosts
- The topic ‘Slide Effect ON, sub-menu vertical positionning wrong’ is closed to new replies.