Home Forums Weaver Xtreme Theme How to make an Unclickable Menu Item Text change color when hovering?

Topic Resolution: Resolved
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #73924
    miamax
    Participant

    In order to have two particular menu items unclickable, I created custom links in Menus:

    URL: #
    CSS Classes: unclickable

     

    and then placed this code in Custom CSS / Global CSS:

    .unclickable > a {
    pointer-events: none;
    }

     

    https://www.dwellinthegarden.com/pickfair/

    It works. “Boot Trays & More” and “Gifts For Gardeners” now are non-clickable.

     

     

     

    But now I want the text to change to “white” upon hover.

    You can see that “Needlepoint Belts” (which is clickable) changes to white upon hover.

     

     

    I want “Boot Trays & More” and “Gifts For Gardeners” text to change to white on hover.

    I tried placing this code in Custom CSS global:

    .unclickable > a {
    pointer-events: none; hover color: #FFFFFF;
    }

     

    That doesn’t work.

    Is there a way to do this?

     

    Thank you.

    #73925
    User
    Moderator

    Can’t test it here, but does

    .unclickable > a {
    pointer-events: none;
    }
    .unclickable > a {
    hover color: #FFFFFF;
    }

    Work?

    Regards!

    #73926
    scrambler
    Moderator

    The rule for hover would have been

    .unclickable > a:hover {color:white;}

    Put the pointer event none disable that setting.

    I will look in another way to disable the link

    #73928
    scrambler
    Moderator

    Here the proper way to do it

    How to Make a Non Clickable Menu Item in WordPress – JoshHall.co

    Basically create a new menu item with URL #

    Then on the right side where the new menu item appears with all its options opened, remove the # from the URL box

     

    #73929
    miamax
    Participant

    This did not work to change the text color when hovering:

    .unclickable > a {
    pointer-events: none;
    }
    .unclickable > a {
    hover color: #FFFFFF;
    }

     

     

    This did not work, either:

    .unclickable > a:hover {color:white;}

     

     

    But this works, from the JoshHall.co link you gave me:

    .unclickable > a:hover {
    cursor: default !important;
    }

     

     

    Yay!

    Thanks so much for your responses!

    #73930
    scrambler
    Moderator

    Would be so much easier and cleaner to follow the proper method I referenced for non clickable items 🙂

    #73931
    miamax
    Participant

    But that’s exactly what I did, and it works!  🙂

     

    (Someone had posted the CSS in JoshHall.co comments.)

    #73932
    scrambler
    Moderator

    No the easiest way was to simply remove the URL from the menu item in Appearance > Menu

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