[Support request] Adding hover effects to main nav

Home Forums Support Adding hover effects to main nav

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #967334
    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!

    #967511
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    Let me know 🙂

    #967601
    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

    #968024
    Tom
    Lead Developer
    Lead Developer

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

    #968033
    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?

    #968210
    Tom
    Lead Developer
    Lead Developer

    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;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.