Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Results Overlaying Navigation Drop-Down
This topic contains 2 replies, has 2 voices, and was last updated by WebicsAU 9 years, 1 month ago.
- AuthorPosts
- July 8, 2015 at 8:41 am #5271
Hi Ernest,
Thanks for all your help over the last few weeks. I am in need of your assistance again as I cannot seem to figure this one out.
The navigation on the website contains drop-downs and mega-menus. When the results box is displaying, it is overlaying these drop-downs. I have tried z-index positioning but as the header is contained within the main wrapper and the results outside of this, I am finding it difficult to come to a stable workaround.
Thanks for your help,
AaronAttachments:
You must be logged in to view attached files.July 8, 2015 at 11:03 am #5274The problem is that the results position is absolute to the window scope and the menu box position is absolute to it’s parent scope – because it’s parent item’s position is set to relative.
Z-index defines an absolute element z-axis position relative to other elements with the same positioning, but if the closest relative parent is different, then the element higher up the Node tree is displayed first.This means, that this is not solvable by ajdusting the z-indexes.
I would rather suggest triggering an event to close the result list, if the user hovers over the menu. Try putting this script to your site footer between script tags:
jQuery(function($) { $('.menu-item').hover(function(){ $('body').click(); }); });
This will trigger a body click if the user hovers over the menu, and it closes the results list.
Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
July 9, 2015 at 12:08 am #5282Ernest,
Once again a perfect result. Thank you so much for your prompt assistance with this issue.
Kind Regards,
Aaron - AuthorPosts
You must be logged in to reply to this topic.