Docs

[imokweb]

Hello
Can you help me please.
I am building a website, with the latest wordpress and latest X theme version.
I would like to add a separator beetween the menu items like it is shown in the attached picture.
Can you help me out.
Thanks!

[Lely]

Hi There,

Thank you for the screenshot. Please add the following CSS on Appearance > Customize > Custom > Edit Global CSS:

.x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .x-nav > li {
    font-size: 11px;
    display: inline-block;
}
.x-navbar .desktop .x-nav>li:after {
    content: "/";
    display: inline-block;
    margin: 0 0.5em 0 0.75em;
    color: #ddd;
}

If this doesn’t do the trick, please share your site URL

[imokweb]

Hello again
This almost did the trick, but it inserted the separator after.
The link is dev.imok.ro/militia
Thanks
And thanks for the quick reply 😀

[Lely]

Hi There,

Please try this instead:

.x-navbar .desktop .x-nav>li:last-child:after {
    content: "";
}
.x-navbar .desktop .x-nav > li:after {
    display: inline-block;
    content: " ";
    width: 100px;
    height: 50px;
    top: 19px;
    background-color: transparent;
    position: absolute;
    right: -12px;
    transform: skewX(-26deg);
    -ms-transform: skewX(-26deg);
    -webkit-transform: skewX(-26deg);
    border-right: 1px solid #ddd;
}

Hope this helps.

[imokweb]

Hello again
and I’m sorry to bug you 😀
It works almost good 😀
I just have one more question, how can you make the slashes disappear after “ACTIVITATI” menu item
Thanks.

[Lely]

Hi There,

Don’t worry we’re here to help.

Please update this part:

.x-navbar .desktop .x-nav>li:last-child:after {
    content: "";
}

To this:

.x-navbar .desktop .x-nav>li:last-child:after {
    border-right: 0;
}

Cheers!

[Author]

Posts