# WIP: Nav nestable: elements other than text link or dropdown aren't wrapped with li's on the canvas

**URL:** <https://forum.bricksbuilder.io/t/wip-nav-nestable-elements-other-than-text-link-or-dropdown-arent-wrapped-with-lis-on-the-canvas/23384>\
**Category:** Bugs\
**Tags:** v1-9-9-beta\
**Created:** [June 9, 2024, 8:30pm UTC](https://forum.bricksbuilder.io/t/wip-nav-nestable-elements-other-than-text-link-or-dropdown-arent-wrapped-with-lis-on-the-canvas/23384 "2024-06-09T20:30:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![d19dotca](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/d19dotca/32/21300_2.png) [@d19dotca](https://forum.bricksbuilder.io/u/d19dotca)\
**Post date:** [June 9, 2024, 8:30pm UTC](https://forum.bricksbuilder.io/t/wip-nav-nestable-elements-other-than-text-link-or-dropdown-arent-wrapped-with-lis-on-the-canvas/23384/1 "2024-06-09T20:30:06Z")

</div>

**Browser** : Safari  
**OS** : macOS  
**URL** : (redacted)

I think we have another annoying discrepancy between what the editor shows and how it actually shows in the frontend.

Using a Nav Menu Nestable element, I have various links, a divider, another link, and then a button. I have everything left-aligned, but want the button to be on the far right side instead in the div.

In scenario one, I can get it to work fine in the editor but it won’t show correctly in the frontend. I asked for assistance in Facebook and got valid responses, but that’s when I realized scenario two… it works in the frontend thankfully but now it won’t show properly in the editor.

Currently focusing on scenario two since this is what I need in the sense that it at least works properly in the frontend. I’m including screenshots below…

In the editor, it looks like this:

 ![image](https://forum.bricksbuilder.io/uploads/default/original/3X/a/3/a38fc223ab4fa8cd3ba7517a524d4646c78c6e4f.png)

You can see it’s wrong as it also pushes out the All Trailers link when it should be left-aligned and only the button being right-aligned.

Here’s what it looks like in the frontend which is how it _should_ look:

 ![image](https://forum.bricksbuilder.io/uploads/default/original/3X/e/3/e323b62b18f39567e0336208f99d0a716115650d.png)

To achieve this to work properly in the frontend, I had to use this CSS code on the Nav Nestable element:

```auto
%root% .menu-item:last-of-type{
margin-left: auto;
}

```

For scenario one, what I had tried to do was simply select the button and add margin-left:auto and margin-right:0, and while this looked right in the editor it never showed properly in the frontend, and my helpers in Facebook suggested this was due to the

-

---

<div class="post-metadata">

**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\
**Post date:** [June 10, 2024, 2:11pm UTC](https://forum.bricksbuilder.io/t/wip-nav-nestable-elements-other-than-text-link-or-dropdown-arent-wrapped-with-lis-on-the-canvas/23384/2 "2024-06-10T14:11:10Z")

</div>

Hi Dustin,  
Thanks so much for your report!

Scenario 1: The margin-left is added to the button but not to the li, which is added automatically. If you wrap the button with a li (div set to li) and give it margin-left: auto, it works fine (which is to be expected).

Scenario 2: if you look at the builder source code, you will see that the button on the canvas is not wrapped with a li. menu item, so your CSS cannot work. Presumably, the code currently only provides this for text links or dropdowns. I’ll create a task for this.

Best regards,  
timmse