Add one (only one) seperator to a specific menu item

Hi there,

You can use the same method here: https://docs.generatepress.com/article/adding-buttons-navigation/

Let me know if you need help modifying the CSS.

Thanks Leo,

I have that one but not sure what to amend it to, sorry. I just want one | with 10px either side

Just to make sure, you want the divider on the right of BLOG/left of facebook icon?

yes please buddy

You can add the social-divider class to the facebook icon, then this should be the CSS:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.social-divider a {
        border-left: 2px solid #000000;
    }
}

Thanks Leo

No problem!

Sorry to use such an old post, but I was wondering if its possible to have the social-divider class not change colour on mouseover?

Like on hover? Looks like it's staying white no?

Sorry Leo I only gave you half the info. I have been using the menu highlight in conjunction with the above CSS. All works great its just that when you hover over the item with the social divider then the line changes with the menu item.
Below is my CSS

@media (min-width:769px) {
    .main-navigation .main-nav ul li.social-divider a {
        border-left: 2px solid;
    }
}

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 5px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        display: block;
        width: 0;
        height: 2px;

        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 50%;
    }
}

Weird. This is not what you are seeing?
https://www.screencast.com/t/KGHT2f39xeC

Sorry Leo no, but its my issue not a theme problem, marking this as resolved

No problem!

Let me know if you need another look :)