[Support request] Slash as a Menu Separator

Home Forums Support [Support request] Slash as a Menu Separator

Home Forums Support Slash as a Menu Separator

  • This topic has 13 replies, 3 voices, and was last updated 3 years ago by Tom.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #546398
    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.

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #546641
    Leo
    Staff
    Customer Support

    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?

    #546645
    Kle

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

    #546648
    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:)

    #546780
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #546791
    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.

    #546800
    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.

    #546943
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    .main-navigation:not(.toggled) .menu > li:first-child a:after {
        content: "/";
        padding-left: 20px;
    }
    #546969
    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.

    #547527
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #547620
    Kle

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

    #547647
    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.

    #547864
    Kle

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

    #547883
    Tom
    Lead Developer
    Lead Developer

    Glad you got it working. You’re welcome 🙂

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.