Results Overlaying Navigation Drop-Down

[WebicsAUParticipant]

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,
Aaron

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

The 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 :)

[WebicsAUParticipant]

Ernest,

Once again a perfect result. Thank you so much for your prompt assistance with this issue.

Kind Regards,
Aaron

[Author]

Posts