Add Lines Between Menu Items

Support
#1

I’m trying to add some lines between the menu items on an inline menu:

I once had this figured out, but can’t seem to find it now. I tried using the Pro Header builder and adjusting the borders, but I couldn’t make them uniform using those options:

Site is http://ahg-nationwide.com

Any help would be very appreciated!

#2

Hi @stuartrowens,

Thanks for writing in.

You mean you’re trying to achieve what’s on the first screenshot?

In your menu Top Links setting, find the Setup section and change the Align Self to Center instead of Stretch.

Thanks!

#3

Thanks for your reply, Rad. Yes, I’m trying to make the lines between the menu items look like the first screen shot.

The flex was already set to center. Also, I’m not sure how that would impact the lines.

#4

Hi There,

Please add the x-menu-line-between class to your navigation inline element:


After that add this custom CSS:

ul.x-menu-line-between li {
    position: relative;
}
ul.x-menu.x-menu-line-between li:after {
    content: "";
    height: 25px;
    width: 2px;
    position: absolute;
    z-index: 9999;
    background: #fff;
    right: 0;
    top: 36px;
}

Hope it helps :slight_smile:

#5

Thank you Thai. I tweaked it a little bit, but that worked great.

#6

Hi @stuartrowens,

Happy to hear that.

Feel free to ask us again.

Thanks.

#7

I would like to achieve a similar effect, but I don’t want the line at the end, only in between. What should I alter to get this effect?

http://websozo.com/beestunning

#8

Hi @nlwebdesign,

In your setup, add this code below:

ul.x-menu.x-menu-line-between li.menu-item-153:after{
    background:none;
}

Hope it helps.

Let us know how it goes.

Thanks.

#9

So far so good. Thank you.