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

Bugs
1

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
image2864×240 43.7 KB

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
image3274×226 58.6 KB

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

%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

  • tag being used. Whether true or not, this just shows multiple scenarios where we have the editor showing us one thing, and the frontend showing us another.

    It seems these discrepancies are happening too often, so I’m intending to keep reporting them all when I run into them so that we can nail these down bit by bit to hopefully make it reliable enough in the future that the editor will as closely as possible show how it’ll appear in the frontend.

    Please let me know if there’s anything I can offer, in terms of access or anything like that if needed too.

    I suspect to reproduce though in your lab, it’d be something like this:

    1. Add a section. In the container, add a Logo element and a Nav Nestable element.
    2. Set the logo.
    3. In the Nav Nestable element, add in several links, a divider, one more link and then one button at the end.
    4. Select the button and set margin auto on left and 0 on right, you should notice that this make it look correct in the editor but when you view it in the frontend it will not look the same. This is scenario one.
    5. Now on the Nav Nestable, add the code from above to the custom CSS, then save. This should show correctly in the frontend but not appear correctly in the editor. This is scenario two.
    • 2

    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

    1 Like