Best Method to add Inline Nav Dividers and Separators

I’m trying to recreate a page for a client but I can’t seem to make the dividers the same way they have theirs.

Trying with the border feature doesn’t work too well

Tried to play around with the particles section but there’s very little documentation on them. It’s not even mentioned in the knowledgebase if you search ‘particles’ in the header builder introduction:

I don’t know why there isn’t a simple section for this that has premade dots and lines. I feel like the recreating the dividers would’ve taken very little time; maybe it’s also that I just don’t know how to use the particles very well.

This guy seemed to have the same problem but it didn’t help.

Hi there,

Instead of adding a border to the setting, try adding this to the Inline Navigation element’s Element CSS that you can find when you click on its customize option.

$el a .x-anchor-content {
  position: relative;
}

$el li:not(:last-child) a .x-anchor-content:after {
    content: "";
    width: 2px;
    height: 12px;
    background-color: #fff;
  
    position: absolute;
    right: 0;
}

Feel free to change the value of the width, height, and background-color that fits your design.

Hope this helps.

That worked perfectly, thank you.

You’re most welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.