Archived topic

Adding hover effects to main nav

5 replies · Started by Mark on July 25, 2019

Viewing posts 1–6 of 6

July 25, 2019 at 1:07 pm #967334

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!

July 25, 2019 at 8:02 pm #967511

Hi there,

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

Let me know :)

July 26, 2019 at 12:55 am #967601

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

July 26, 2019 at 9:59 am #968024

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

July 26, 2019 at 10:22 am #968033

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?

July 26, 2019 at 5:08 pm #968210

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;
}

This archived topic is closed to new replies.

Start building better websites today.