Docs

[thatcreativeguy]

How do you add dividers “|” or bullets (bullets are optional) between the navigational links so they can look like this:

Home | About | Our Ministries | Calendar | Contact

Right now, they are just spaced out. Screenshot attached. Thanks!

[Rahul]

Hey There,

Please add the following CSS under Customize -> Custom -> CSS :

.x-navbar .desktop .x-nav > li:last-child > a {
border-right: none;
}
.x-navbar .desktop .x-nav > li > a {
border-right: 1px solid red;
}

Hope it helps.

[thatcreativeguy]

This reply has been marked as private.

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[thatcreativeguy]

This reply has been marked as private.

[Jade]

Hi there,

Please try this code:

.x-navbar .desktop .x-nav > li > a:after {
    content: "|";
    position: absolute;
    right: 0;
}

.x-navbar .x-nav-wrap .x-nav > li > a {
    position: relative;
}

.x-navbar .desktop .x-nav>li:last-child a:after {
    display: none;
}

Hope this helps.

[thatcreativeguy]

This reply has been marked as private.

[Joao]

Hi There,

I have tested the code provided by Jade on my installation and it works.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[thatcreativeguy]

This reply has been marked as private.

[Rue Nel]

Hello There,

I am another staff checking on this thread! I have have tested the code in both two sites and it should have work. With this code:

.x-navbar .desktop .x-nav > li > a:after {
    content: "|";
    position: absolute;
    right: 0;
}

.x-navbar .x-nav-wrap .x-nav > li > a {
    position: relative;
}

.x-navbar .desktop .x-nav>li:last-child a:after {
    display: none;
}

You will have these:

Now it may have not work in one of your site because you have inserted an invalid css in your customizer. Please correct this:

Hope this helps. Please let us know how it goes.

[Author]

Posts