Why isn't dropdown menu item indentation taking effect in Relume?
Hi! My dropdown menu item indentation isn't taking effect in Relume (at least in preview, it pushed the item to the bottom of the menu items list), any ideas? Thanks!
Hi! My dropdown menu item indentation isn't taking effect in Relume (at least in preview, it pushed the item to the bottom of the menu items list), any ideas? Thanks!
(apologies if this is the wrong channel, there only seems to be a webflow or figma support channel, not a relume one specifically)
S茅bastien G. ah yeah interesting - so in the layers panel you were expecting that if you nest additional items, it would create a sub-menu in the nav? I'm not 100% sure if this is what was built - I believe the intention was more about slugs, and less about navigation nesting. Does the Specifications CDC Airmax have a slug like /airmax/specifications- or no? But I do think that what you are trying to do should be a real thing, unfortunately don't think its something that will happen very quickly. I'll play around with some custom code to see if we can't come up with a reasonable workaround in the meantime. Will come back. Appreciate you flagging this and apologies for the confusion and inconvenience here S茅bastien.
oh also this was the perfect channel for this - appreciate you!
Matt J. thanks for the quick response! Correct, if I can nest it in the panel I indeed expect the nesting to be reflected in the menu - If there a trick to work around this and force an indentation that would lovely! thanks!
yeah makes sense - appreciate the clarification!
yeah this was definitely not built like that - the reason its nested is because of the sitemap - like I was saying, basically structuring the slugs, not the frontend UI. Historically we've never had multi-level dropdown menus. Honestly and this is just my experience and opinion, which you didn't ask for, but multi-level menus are usually a bit of a nightmare from a UX perspective. The workaround is pretty fragile too - if you reorder items or add new items, you'll have to adjust the CSS. Here's an example site: evpyuqdq.relumesite.ai Here's the CSS:
<style>
/* FAQ nav dropdown: clip the list, and indent only the "Level 2 Item" link */
.nav-link-dropdown-list {
overflow: clip;
}
.nav-link-dropdown-list > .nav-link-dropdown-item:nth-child(3),
.nav-link-dropdown-list > .nav-link-dropdown-item:nth-child(4) {
margin-left: 2rem;
}
</style>Here's the initial prompt I gave claude:
give me a way to indent the level 2 item in the FAQ dropdown - but only this item. lets do margin-left: 2rem and make sure to add overflow clip to the dropdown list.
Give me a CSS snippet I can paste into the head code for this Relume Publish site.
https://evpyuqdq.relumesite.ai/
Here's how it works. nth-child starts at 0 (first item), then 1 is the 2nd item, 2 is the 3rd item. Its your traditional indexing format. It's starting from the dropdown list - so the first item inside of dropdown list would be nth-child(0). So if you do reorder above the level, you'll need to adjust the number. If you add new items above or within the levels, you'll need to adjust the number. Hope that helps out!