[Support request] How to change this?

Home Forums Support How to change this?

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #964340
    Ravi Dixit

    Here is the screenshot of my website’s primary navigation https://prnt.sc/oijtea

    I am on the homepage, so you can see the Home menu is highlighted with a blue box. I want to change this to an Underline.

    So when a user on the BLOG page then blog menu should be underlined instead of highlighting with the blue box.

    Thanks in advance…

    #964513
    Leo
    Staff
    Customer Support
    #964552
    Ravi Dixit

    It is more than good what I was expecting.

    But I don’t want to show the colour on hover, only underline animation should be shown.

    I tried to change colour from Customize>Colors>Primary Navigation. But didn’t work…

    #964623
    Leo
    Staff
    Customer Support

    Try just this:

    @media (min-width: 769px) {
        .main-navigation .menu > .menu-item > a::after {
            content: "";
            position: absolute;
            right: 0;
            left: 50%;
            bottom: 15px;
            -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 {
            width: 50%;
        }
    }

    You can change the color by modifying currentColor in the code above.

    #964665
    Ravi Dixit

    I already did the same but it is changing the line colour, I don’t want to show blue hover colour, It should show the animated underline only. https://prnt.sc/oiqh3o

    #965152
    Leo
    Staff
    Customer Support

    The blue should be coming from the customizer. It’s the background current and background hover.

    #965239
    Ravi Dixit

    I know that but can I remove that colour and it should only show line.

    Please help with this.

    #965240
    Ravi Dixit

    I mean, I only want to show line as Background Current and hover. Don’t want to show any colour.

    #965376
    Leo
    Staff
    Customer Support

    If you remove the color code from the customizer, then it should show as transparent.

    Let me know if this helps 🙂

    #965531
    Ravi Dixit

    I did the same already but it is making the menu invisible or white.

    #965541
    Leo
    Staff
    Customer Support

    That’s because your Text Current is set to white as well (so it’s white on white).

    Have you tried changing that to a different color like black?

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