Stabilizing Mega Menu Dynamic Positioning

Hey guys, got a mega menu dropdown question. The dropdown element seem to be dynamically positioning itself with with the inset property based on its proximity to the edge of the screen (left to right).

Because I have this pill-shaped navigation bar, it is just goofy the way the dropdown displays on larger screens– it is offset to the right and visually “leaves” the boundary of the right edge of the pill.

I get that this is a feature, not a bug but… In this case, I simply do not need it to behave this way. It can and should always simply anchor itself such that the right most edge of the dropdown is always aligned to the right most edge of the toggle (“My Account”). That way it always drops down within the boundary pop the pill navigation.

Hope that makes sense. Can anyone offer any help about fixing this issue for this use case?

Thanks!

2 Likes

The values of the inset inline style are being calculated by JS somewhere. In the pic above, the inline style has the right and top values set to auto and then math is performed on the left value. But when the width of the browser reaches a certain point, the inset values change to be top and right having the math done on them and the bottom and left values are set to auto, like this. inset:53.5px 310.016px auto auto.

If I could set it so that the math is ALWAYS done on the top and right only and left and bottom are always auto, that would solve it, I think. But that seems like it would involve JS customization and I wonder if anyone has tackled this sort of thing before? Like, resting control of working JS and forcing it to do something different than its default behavior. What can you do to help?

I looked into this an we’ll need to do an update to support this, those are always going to be auto determined without turning off our element code entirely. We can support this pretty quickly though, I don’t think there are any controls for this part of the dropdown in general so I’ll gladly create some controls to position yourself through a dropdown most likely. Have a great day.

2 Likes

Thanks @charlie

Yes, I think this should be a configurable part of the dropdown. Do you have any idea how quickly this could be implemented? I have immediate needs for a client build I’m working on currently that will launch in the next couple of weeks. If this could be solved for this project it would be a huge win.

1 Like

I can try to get it into 6.3. Very least you’ll have a custom attribute to control the positioning until the controls are finished. Have a great weekend.

3 Likes

That would be fine. Do you know when 6.3 might be pushed out?

1 Like

Hello @simeoned,

Regretfully there is no ETA at the moment so I would request you, please stay tuned for succeeding theme updates.

Thanks for understanding

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.