Remove link and hover effect form menu item

Support
#1

Hi there see:

I have a phone number as a menu item, how do I remove the hover effect on that item only? (ie make it unclickable)

Thanks

#2

Hey There,

Please go to X/Pro > Theme Options > CSS and add following custom CSS:

.menu-item-239 a:hover { box-shadow:none; }

This will remove the hover effect. All the best!

#3

Hi thanks, it didnt work:

@media (max-width: 500px){
    .x-brand img {
        width: 250px;
    }
}
.x-colophon {
    background-color: #002e47;
}
div.wpforms-container-full .wpforms-form .wpforms-required-label {
    color: #ff0000;
    font-weight: 900;
  font-size: 22px
}
.menu-item-239 a:hover { box-shadow:none; }

Is my code…

also how do I remove the “link” ? even if this works, it will still be clickable, I dont want it to be.

#4

Hi @logoglo,

Please update the code to this one:

.menu-item-239 a:hover {
    box-shadow: none !important;
    color: #002e47 !important;
    pointer-events: none;
}

Hope that helps.

Thank you.

#5

Nearly there, its now glitching a little on the mouse pointer…

#6

Hello @logoglo,

Please have the code given by @marc_a updated and use this instead:

.menu-item-239 a {
    pointer-events: none;
}

.menu-item-239 a:hover {
    box-shadow: none !important;
    color: #002e47 !important;
}

Kindly let us know if this has worked for you.

#7

Worked perfectly thanks!

#8

Glad to hear that, @logoglo!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.