Menu Dividers - Pro Header

[PhilTone]

Hey,

I’m trying to add dividers in the menu but i can’t get it to work.

I read this article: https://theme.co/apex/forum/t/how-to-add-menu-dividers/17052

But the solutions there won’t really work.

If I use a border then the border has 100% of the height and I just want small lines as dividers.
The particle option doesn’t work either because the dividers just appear on hover wich also isn’t a really good way for a divider to work

Do you have any good solution for this?

Maybe it would be good to add this as a feature in some future updates?

[christopher]

Hi there,

You can use a CSS code like this by adding to Pro > Launch > Theme Options > CSS:

.menu-item .x-anchor .x-anchor-content:after {
    content: "";
    display: block;
    background-color: #f00ff;
    width: 2px;
    height: 25px;
}

But I will be of a better help if you send us the URL of your website header to be able to check the case and fine tune the divider.

Thank you.

[PhilTone]

I changed it a bit to:

.menu-item .x-anchor .x-anchor-content:after {
content: “”;
display: block;
margin-left:23px;
height: 35px;
border:solid 1px #dcb76aad;
}

Hope this is still “right”

Problem is (also with your version) that at the end of the menu I alos have a devider wich i don’t want there…

[Joao]

Hi There,

Please also add:

.menu-item#menu-item-37 .x-anchor .x-anchor-content:after {
    display: none !important;
}

Hope it helps