fix: Always position navigation menu content absolute and make it auto width #2352
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Currently the navigation menu content is only positioned absolutely on breakpoints 'md:' and above. The same applies to auto width.
On smaller widths the content starts to push around the surrounding links as well as it's trigger link because it enters the normal document flow.
When applying the position absolute permanently, the 100% width does not work on any width lower than 'md:'. That's why we also have to use auto width without the 'md:' breakpoint restriction.
I have not found an issue that raised this problem. Since it's such a small change I thought it might not need it. I can create one and we can discuss the normal behavior if that is not the case.
Here is an example from the current Navigation Menu component demo
navigation-menu.mp4