[Resolved] Add one (only one) seperator to a specific menu item

[scott doel]

Hi All,

Have looked and I cant see a request for this.

My site is at highestperforming.com and rather than using the secondary menu I would like to add a divider line before I add my social icons, with a little padding also.

I’ve tried the align right tutorial for social but its not quite the look I wanted

[Leo]

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.

[scott doel]

Thanks Leo,

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

[Leo]

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

[scott doel]

yes please buddy

[Leo]

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;
    }
}

[scott doel]

Thanks Leo

[Leo]

No problem!

[scott doel]

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?

[Leo]

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

[scott doel]

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%;
    }
}

[Leo]

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

[scott doel]

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

[Leo]

No problem!

Let me know if you need another look 🙂

[Author]

Posts