Join the Webstudio community

Updated 3 months ago

Radix duplicate of navigation menu item, how to move that below it's parent?

At a glance

The community member has duplicated a LOCATION and renamed it to INTERIORS, but the Menu Content remains in the same position as the original LOCATION. They are looking for a way to move the Menu Content to the right, below the INTERIORS. Other community members suggest that the Radix library does not have a feature to position the dropdown according to the parent, and provide some workarounds, such as putting dropdowns in the navigation menu and static links outside of it, or making the dropdowns wider so they are at least under the parent. The community member eventually solves the issue by having only the one dropdown in the Navigation Menu and duplicating the entire Navigation Menu, which positions the Menu Content where they need it, although they note that it is not a very clean solution.

Useful resources
I've duplicated LOCATION, renamed the duplicate to INTERIORS, but the Menu Content stays on the exact same position as the LOCATION. I've been looking around the display settings and positioning, but I'm a little lost. I would like to have it moved to the right below INTERIORS. Anyone any idea why this happens?
Attachment
image.png
R
J
10 comments
Radix unfortunately does not have a feature to position the dropdown according to the parent. couple things you can do...
Ahh okay, so it's not me 😁
  1. put dropdowns in navigation menu and static links outside of it so the dropdown is centered to all dropdowns and not entire menu
  1. make dropdowns wider so they are at least still under the parent
heres more info and a feature request i have to somewhat combat it https://github.com/webstudio-is/webstudio/issues/3956
So you would duplicate a dropdown Menu Item and make the Menu Content wider so that it's at least under the parent, even though it's much larger now?
And move out the links from the Navigation Menu
I think I solved it now by just having only that one single dropdown in the Navigation Menu and duplicating the complete Navigation Menu. Now it actually shows it where it needs to be. Not super clean, but it works.
Attachment
image.png
ha that works too I guess. nice
Add a reply
Sign up and join the conversation on Discord