Home › Forums › WoodMart support forum › Mega Menu – Dropdown problem
Mega Menu – Dropdown problem
- This topic has 9 replies, 4 voices, and was last updated 6 years, 7 months ago by Artem Temos.
-
AuthorPosts
-
April 23, 2018 at 8:32 am #53919
gpapParticipantHello Sirs,
I’m facing a problem regarding the sidebar mega menu.
When I hover over some categories, the dropdown menu does not appear.
This only happens when there is another element close to the category dropdown.Is this a z-index issue? Can you help me solve this problem?
Attached you can find 2 gifs showing the problem.
Attachments:
You must be logged in to view attached files.April 23, 2018 at 9:54 am #53951
Elise NoromitMemberHello,
I have checked both your gifs and site and cat tell that your menu works properly http://prntscr.com/j8wptn
If you want to add a mega menu to some of the category items, navigate to HTML block and create this submenu for each item. http://prntscr.com/j8wqy6
Next, go to Appearance > Menu > Categories > enter the category item you and find HTML Block for the dropdown as shown http://prntscr.com/j8wtbc choose the HTML block which you have created.
Best Regards
April 23, 2018 at 10:08 am #53955
gpapParticipantHello and thank you for your answer.
Let me clarify the problem. I do not want to use Mega menu. I want the sub menu to NOT disappear when there are other elements nearby.
You can see the problem on the home page
The sidebar category “Piping Joints” has the problem because it is next to a slider. Try this.You can also try and check here
Problem also occurs on hover at the category “Piping Joints” because it is next to the related products slider!Basically the problem is that the sub menu does not stay visible after trying to move the mouse on it.
I belive it has something to do with z-indez of the sub menu?Thanks again, looking forward to your reply!
April 23, 2018 at 1:05 pm #54013
Elise NoromitMemberHello,
Now I see the problem. Please enter your page editing mode and put padding 30px on the left and on the right inside the row or column wрich contains this image gallery. http://prntscr.com/j8zfmo
If you have any problems with this please provide your site admin access.
Best Regards
April 23, 2018 at 2:18 pm #54037
gpapParticipantHello, thanks for your reply.
Indeed this method solves the problem on homepage but not in product page as mentioned above.
For example, check out here and here.
The problem occurs on single-product pages that have up-sell products (aftermarket in my case).Using padding only solves the problem for the homepage, what I was hoping for is a universal solution for all pages.
Is there a way of achieving that?
Attachments:
You must be logged in to view attached files.April 23, 2018 at 7:26 pm #54161
Bogdan DonovanKeymasterHi,
Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.
.sidebar-container .widget_nav_mega_menu { position: relative; z-index: 200; }
Regards
April 24, 2018 at 2:17 pm #54337
gpapParticipantHello Mr. Donovan,
Thanks for the snippet. That did the work.
I have another serious problem regarding the sidebar.
On mobile & tablet view “Categories Sidebar”, when I click on any of the categories that have sub-menu nothing happens, although I can right-click and open the link in a new tab. This happens only for categories which have a sub-menu.
I send you a gif –> here showing the problem, you can also check our site yourself!
The categories sidebar is more or less useless for mobile & tablets this way. Can we solve the issue?
Thank you for your time.
April 24, 2018 at 2:36 pm #54344
Bogdan DonovanKeymasterHi,
Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.
.sidebar-widget .vertical-navigation .item-level-0.item-event-click.item-menu-opened .sub-menu-dropdown { display:block; position: static; width: 100%; box-shadow: none; -webkit-box-shadow: none; padding: 0; border-top: 1px solid rgba(129,129,129,.15); background-color: #f9f9f9; } .sidebar-widget .vertical-navigation .item-level-0 .menu-item:not(:last-child) { border-bottom: 1px solid rgba(129,129,129,.15); }
Regards
April 25, 2018 at 10:54 am #54501
gpapParticipantHi Mr. Donovan,
The CSS snippet did the job!
For anyone might find this usefull, I also added the following code at my Custom CSS in order to strech the menu to the whole container.
.offcanvas-sidebar-mobile .area-sidebar-shop .sidebar-widget{ padding-left:0px; padding-right:0px; }
Thanks again for your time!
April 25, 2018 at 11:25 am #54506
Artem TemosKeymasterThank you!
-
AuthorPosts
- You must be logged in to create new topics. Login / Register