[Support request] Divider Bars Between Footer Nav Menu Items

[Jeremy]

Hello,

I am trying to create a footer menu where the navigation item are separated by a vertical bar:

http://37.60.251.180/~jeremyfu/msdomingolawgroup.com/?elementor_library=n_footer&preview=1&preview_nonce=99e04cd396&theme_template_id=282

I would also like to control the height and styles of the bars.

Thanks!

-Jeremy

[David]

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

[Jeremy]

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

[David]

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;
}

[Jeremy]

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

[David]

Glad to be of help

[Jeremy]

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

Thanks gain!

[David]

Change this:

.elementor-nav-menu li:after

to

.elementor-nav-menu > li:after

[Jeremy]

That worked great!

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

Thanks again, David!

[David]

We can try this:

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

[Jeremy]

That did it!

Thanks again.

Best,

Jeremy

[David]

You’re welcome

[Author]

Posts