Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Fixter - DropDown Menu Problem

Featured Lock Resolved Issue
I am having the most bizarre experience with the vertical menu drop down.

When there is an item on the main content area with a hover image or card the menu dropdown appears correctly however, I cannot click it.

No matter how much I try I alway end up clicking the item underneath.

How can I fix it (no pun intended) because I love this layout.

Thanks.

NB: The site is online and I can give you access you have a look yourself. Here are some screenshots attached.

Attachments (1)

  • Screen Shot 2018-08-31 at 12.48.04 PM.png
    Screen Shot 2018-08-31 at 12.48.04 PM.png 288.6 KB

13 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Please use this css into your custom css to solve this issue

main#sp-component {
z-index: 0 !important;
}


-Thanks

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. Please share your site url here.

Gabriel Nwoffiah

More than a month ago #Permalink
Hi,
Thanks for your query. Please share your site url here.

Can I PM you? It isn't public yet. I mean it is not yet for public viewing.

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. Please use this css into your custom css to solve this issue

body.predefined-header1 #sp-header .sp-megamenu-wrapper .sp-megamenu-parent > li > .sp-dropdown {
padding-left: 0px !important;
}



-Best Regards

Gabriel Nwoffiah

More than a month ago #Permalink
Thanks. I did it. Its better now but still once the mouse moves out of that small gap between the menu and the rollover image, it disappears.

EDIT: On an iPad (landscape) this solution fails. Please advise.

Also, is there a way to align the sub menus i.e bring the up slightly so they align with its parent item? See attached screenshot below.
Screen Shot 2018-09-03 at 8.14.16 AM.png

Attachments (1)

  • Screen Shot 2018-09-03 at 8.14.16 AM.png
    Screen Shot 2018-09-03 at 8.14.16 AM.png 118.4 KB

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. I've tested your site in ipad and i didn't find any issue there.
And you need to hover the mouse directly to the submenus. If you hover over another menu-item then the submenu will be closed.
And to move the submenu a little top please use this css into your custom css

.sp-dropdown-inner {
padding-top: 0px !important;
padding-bottom: 0px !important;
}


-Best Regards

Gabriel Nwoffiah

More than a month ago #Permalink
Thank you for the code. I have moved the menu up. However,

I think you don't understand the problem with the menu disappearing. See attached image for clarity.

On the site. The main slide show the menu and the sub menus show correctly and works just fine.

On the homepage when you scroll up after the slideshow and scroll to the section where there's cards like Actors, Auditions etc. There is where the problem starts. In this section of the page when the sub menus slide out and you move you mouse to click it, you will see that is is not possible to click the menu because it clicks the item that is under it like eg the actors section.

So it seems like there is some conflict there. Even though the menu is on top of the item, it seems to be affected by the item that is underneath it.

I hope this is clear. Please scroll to that section and test it. On the iPad it is even worse because the margins are not there so you cannot click the sub menus.

See attached image. Thanks.

Gabriel Nwoffiah

More than a month ago #Permalink
menu-prob.jpg

Attachments (1)

  • menu-prob.jpg
    menu-prob.jpg 140.3 KB

Gabriel Nwoffiah

More than a month ago #Permalink
Is it possible to move the submenu wards? That is move it to the left closer to the main menu to that it will avoid overlapping the content so much. Another option is perhaps modifying to work like an accordion. Kindly troubleshoot this for me.

Thanks.

Gabriel Nwoffiah

More than a month ago #Permalink
Did you check to see the menu problem I'm having?

Gabriel Nwoffiah

More than a month ago #Permalink
Hi,
Please use this css into your custom css to solve this issue

main#sp-component {
z-index: -1 !important;
}


-Thanks

You solution worked but made only the menu clickable and everything else unclickable. Adjusted it from -1 to 0 and that seems to be working fine now.

main#sp-component {
z-index: 0 !important;
}

Sifat - Staff

More than a month ago #Permalink
Great to know your issue is solved


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 111
Toufiq

Toufiq

Total Accepted Answers: 70
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 26
Ofi Khan

Ofi Khan

Total Accepted Answers: 12
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 9

120

Templates

310742

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us