How to disable Custom CSS effect on mobile

Design help General
1

I have 0 knowledge with coding*

I used this custom code to generate an underline effect on my website’s navbar links:

/* Underline From Left */
.hvr-underline-from-left {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
}
.hvr-underline-from-left:before {
content: “”;
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
background: #ffffff;
height: 1px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
right: 0;
}

Thing is, I would like to disable the effect on mobile. How should I proceed?

Thank you!

2

Why are you using custom code for this? Can you share your read only link please?

3

I stumbled on a forum post that said it was the way to go.

https://preview.webflow.com/preview/pointcinq?utm_source=pointcinq&preview=9132407ef56b78c9a46235987868129f

4

I understand this can be done with interactions but it seemed simpler to go with CSS. Is there a reason not to?

5

Do you find easier to add custom code that you can’t see in the designer than interactions not being a coder?

6

Well, at the time I was starting with webflow and this was an easy way around my poor knowledge of interactions. Making this as an interaction would keep the website “clean”? If so I’ll simply do it this way

7

Look, I created it in 5 minutes to show you how easy it is to build it with interactions.

This is how it looks:

37%20pm
37%20pm1622×932 1.39 MB

And you can clone it here:

https://webflow.com/website/Underline-NavLink?s=navlink

8

Aaron, this is awesome. Much better solution than custom CSS