WIP: Sub-menu alignment stops working when there are two menus in the same page

[streetdog]

Bricks Version: 1.5
Browser: Any
OS: Any
URL: Bricks – Testing Ground

The sub-menu standard behaviour is to align to the left edge of the main menu item. When it gets too close to the edge of the screen it aligns right and a .overflows-viewport class is added to the sub-menu.

When using two menus on the same page, this behaviour is lost. Only the first menu will get the .overflows-viewport class, and the sub-menus on the second menu will always align to the left edge of the main menu item. This will cause the sub-menu to go off screen when it gets too close to the edge and will create some extra horizontal space in the website.

[timmse]

Hi Antonio,
Thanks so much for your report!

In your example, the second submenu also gets the .overflows-viewport class - or am I misunderstanding the problem?

Best regards,
timmse

[streetdog]

Sorry, I forgot to share the link where the problem is most visible.

On this page, there are two menus on the page and that’s where the problem shows up
https://dev.mindprocess.pt/bricks/problem/

On this page, there are also two menus on the page, but the main menu loads first, so the menus always expand to the left:
https://dev.mindprocess.pt/bricks/no-problem/

Edited this reply and the original post to change the URLs. Moved the website to my test server, so the links won’t expire.

[timmse]

Alright,
I was able to reproduce it and added it to the bug tracker.

Thank you very much!

Best regards,
timmse

[SDO]

Hi,

I have the same problem with a header like this:

The submenu opened to the left.

Corrected with this CSS code:

root .overflows-viewport {
  right:unset;
}