[Support request] Adding hover effects to main nav

[Mark]

Hey,

I’m having trouble adding hover effects from https://emilkowalski.github.io/css-effects-snippets/ to the main nav. I enabled CSS classes in the Menu area of the dashboard but having no luck. Is that the best way to do it?

If it helps, the effect I’m trying to apply is:

.gradientBorder {
    position: relative;
    overflow: hidden;
    padding-bottom: 2px;
    margin-bottom: -2px;
    cursor: pointer;
    color: #474E51;
}

.gradientBorder::before {
    position: absolute;
    z-index: -1;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to top right, #13f3b9, #5878F3);
    transition: transform .3s ease-in-out;
    transform: translateX(-101%);
}

.gradientBorder:hover::before {
    transform: translateX(0);
}

Thanks in advance!

[Tom]

Hi there,

Can you link us to your site so we can check why it’s not working?

Let me know 🙂

[Mark]

Hey Tom,

I edited my original post and added it to the URL field where it says only admins can see. Hope that helps.

It seems the effect is partially there but it’s not working properly, and I can’t work out why!

Thanks again,

Mark

[Tom]

Where have you implemented the gradientBorder class? I’m not seeing it in your menu items.

[Mark]

Sorry, I was messing with a diff method. I tried:

.main-navigation .main-nav > ul > li > a  {
    position: relative;
    overflow: hidden;
    padding-bottom: 2px;
    margin-bottom: -2px;
    cursor: pointer;
    color: #474E51;
}

.main-navigation .main-nav > ul > li > a::before {
    position: absolute;
    z-index: -1;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to top right, #13f3b9, #5878F3);
    transition: transform .3s ease-in-out;
    transform: translateX(-101%);
}

.main-navigation .main-nav > ul > li > a:hover::before {
    transform: translateX(0);
}

Which also didnt work.

I’ve added the gradientBorder class to the menu items again, but ye, also not working 🙁

Edit: OK so if I scroll down so that the sticky menu appears, it works on those? But it doesn’t work/show when scrolled up to top, with the main nav?

Edit Edit: I think I see what’s happening, it’s applying to the whole menu item, not just the text within each menu? How do I just apply it to the text, similar to the demo I originally linked?

[Tom]

What if you do this instead?:

.main-navigation .main-nav > ul > li > a  {
    position: relative;
    overflow: hidden;
    padding-bottom: 2px;
    margin-bottom: -2px;
    cursor: pointer;
    color: #474E51;
}

.main-navigation .main-nav > ul > li > a::before {
    position: absolute;
    z-index: -1;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to top right, #13f3b9, #5878F3);
    transition: transform .3s ease-in-out;
    transform: translateX(-101%);
}

.main-navigation .main-nav > ul > li:hover > a::before {
    transform: translateX(0);
    z-index: 1;
}

[Author]

Posts