[Support request] Slash as a Menu Separator

[Kle]

Hi,

Right now I have a / slash as a menu separator on my site that I made as a menu item pointing at nothing, looks good but it appears on the mobile menu as a menu item as well and since it’s not pointing at anything I don’t want it to be there. I looked around the forum but couldn’t figure it out a way to have it (/) as a separator in between two specific menu items (Home / Contact).

If you GP team could provide me with the necessary CSS to do this would be great.

Thank you.

[Leo]

Hi there,

Your site is showing up all weird to me currently: http://www.screencast.com/t/ufdJQmlt1

Looks like something is blocking all the CSS.

Can you try disable the caching plugin first?

[Kle]

That’s odd, it shows fine on my end. I will investigate and get back, thank you.

[Kle]

Can you give it a try now Leo. I think it was a cache issue. Deleted it. Now you can see the menu dash I’m talking about. Thank you:)

[Leo]

Hmm if you want to use your method, then you can add the hide-on-mobile class to those separator:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Or you can try the CSS method:

@media (min-width:769px) {
    .main-navigation .main-nav ul li a:after {
        content: "/";
        padding-right: 15px;
    }
}

[Kle]

Thank you Leo,

I would prefer the CSS method so it doesn’t gets highlighted when hovering, the code you gave doesn’t work for me as I need the / only in between the Home and Contact menu items, and the code shows it everywehere in the menu and right besides the letters not in between. How can I fix that? Thanks.

[Kle]

Or is there a way to add a custom class to the menu so it doesn’t show as a hovering link? That would do it too. Thank you Leo.

[Tom]

Give this a shot:

.main-navigation:not(.toggled) .menu > li:first-child a:after {
    content: "/";
    padding-left: 20px;
}

[Kle]

Hi Tom,

Thank you, but with this code the / becomes a part of the HOME / menu link and not an “inactive” separator in between menu items. Not sure if what I’m asking is too complicated, if so is there a way to make a menu item inactive? or not to hover with css? because I can just leave the / I have in my menu right now pointing at nothing if I just manage to make it not to hover.

Thank you.

[Tom]

Hmm, maybe try this instead:

.main-navigation:not(.toggled) .menu > li:nth-child(1) {
    position: relative;
    margin-right: 10px;
}

.main-navigation:not(.toggled) .menu > li:nth-child(2) {
    margin-left: 10px;
}

.main-navigation:not(.toggled) .menu > li:first-child:after {
    content: "/";
    position: absolute;
    top: 18px;
    right: -13px;
    font-size: 15px;
}

[Kle]

Perfect! Exactly what I was looking for, Thank you Tom!!!

[Kle]

Oh, I encountered a “problem” when scrolling down, in sticky mode, the / goes out of position, it goes further down than the rest of the menu.

[Kle]

Tom, I figured it out a way to do it with a plugin and some css. I appreciate the support regardless, Thank you! : )

[Tom]

Glad you got it working. You’re welcome 🙂

[Author]

Posts