Mega Menu – Dropdown problem

Hello 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.

Hello,

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

Hello 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!

Hello,

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

Hello, 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.

Hi,

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

Hello 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.

Hi,

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

Hi 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!

Thank you!

[Author]

Posts