Divider Bars Between Footer Nav Menu Items

Hi there,

is there not an option in Elementor to add borders to there menu widget?
If not give the menu widget a CSS class - of custom-menu-items and let me know and ill provide some CSS

Thank you, David. I only see a way to add a border to the entire menu, but no the individual items.

Looks like you're applying it with CSS - maybe try this:

.elementor-nav-menu li {
    position: relative;
}

.elementor-nav-menu li:after {
    content: "\007C";
 	position: absolute;
    right: -20px;
    bottom: 15px;
    font-size: 10px;
}

David, you are my hero. That worked perfectly. I had tried that exact code several ways, but had never used the "right" or "bottom" properties, which did the trick.

Thank you!!!

Best,

Jeremy

Glad to be of help

Sorry, David! I discovered the vertical bar is appearing on sub-menu items--how do I prevent that?

Thanks gain!

Change this:

.elementor-nav-menu li:after

to

.elementor-nav-menu > li:after

That worked great!

Ugh, one last question, please. How to I remove the vertical bar from the last item?

Thanks again, David!

We can try this:

.elementor-nav-menu > li:not(:last-child):after

That did it!

Thanks again.

Best,

Jeremy

You're welcome