mega-menu | mega menu a drop | Runtime Evironment library

Previously I had .container-fluid.megamenusip {overflow-y: scroll} which worked until it didn't (it broke the menu open/close button).

In a mobile view how do I scroll through each mega menu?

If I add back .container-fluid.megamenusip {overflow-y: scroll} it doesn't resolve the issue.

The live site is here.

Help appreciated.

Our mobile menu works fine in Chrome & Firefox on a Pixel 5.

On an iPhone 5s (the only iPhone I have), an iPad Mini 2 and on an older iPad, the burger menu open & close icons do not show.

On a non-retina desktop display where Chrome & Firefox work in responsive mode (mobile viewport width), Safari will show the mobile menu open icon, but not the close icon.

The open icon is three pipes rotated 90deg: |||

The close icon is a font-awesome symbol:

In a mobile viewport, from the menu, when you select 'Product', then scroll down and select 'Solution', the page does not automatically scroll back up to see Solution and the top of its mega menu.

I've tried adjusting the function showMenu(self) by adding:

In the demo below, when in a mobile viewport <=768px I do the following:

1. Click on Product, to open Product's mega menu.
2. Scroll down, and click on Resources.
3. I expect Product's mega menu to close, and Resource's mega menu to open.
4. What happens is Product's mega menu closes, but Resource's mega menu doesn't open.

The problem doesn't exist working in the reverse order, i.e. opening Resource's mega menu first, then clicking on Product to close Resource's mega menu, and opening Product's mega menu (this works fine).

I've considered if an element is overlapping the correct item and preventing the right element from being clicked - I don't think this is the case.

You'll need to click the burger menu @ top right to see what happens.

Help appreciated.

When the viewport is 768px or less, we want the a.mega-drop-down links to open on click, rather than on hover as it is for desktop.

The problem is the first click doesn't do anything.

Only subsequent clicks do something.

How do we make the first click on a.mega-drop-down function in the mobile viewport the same way subsequent clicks do?

You will need to adjust the code preview viewport down to 768px or below to avoid the desktop hover effect taking place.

Help appreciated.

When I click on the link Product, I'm trying to toggle the class hover on the span element, so the down-arrow turns into an up-arrow.

Help appreciated.

I am creating a mega menu, and am trying to add a class to a sibling element when the parent is hovered over. I have an example currently but it adds the class to every child element instead of only the one that has its parent being hovered over.

Thanks in advance for your help!

I work in bootstrap 4 building websites, I'm trying to build the following design:

I can't get my head round how it will work! At the moment I have the whole box set to container-fluid so there isn't any padding/margins applied but I don't understand how I can structure the columns to get it to work.

Here's my HTML for what I have tried so far:

I am creating a mega menu in reactjs framework for my ecommerce website. When ever i hover on list item it shows mega menu div but when i move cursor down the menu hides itself. Why it is not stay as it is ?

Local state which controls the menu display state on onMouseEnter and onMouseLeave works well.