Navigation animated bounce reveal

Site URL: https://www.chloebthomas.com

Hi I would like to animate my navigation bar, I have seen one that reveals each title in a bounce effect from right to left as they load (but I can't find the example unfortunately) It's like a staggered effect of each tab dropping down in a chronological bounce... I hope that makes sense?

And then I would like the underline on hover to be animated as well, with the line going from left to right. Example below:

https://www.laterwolf.com

Thank you so much in advance for any help 🙂

My site is: https://www.chloebthomas.com

With underline, add this to Design > Custom CSS

li.gallery-collection a:after {
    content: "";
    background-color: blue;
    width: 0;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: all 0.3s ease;
}
nav.main-nav li.gallery-collection a {
    position: relative;
    border: none !important;
}
li.gallery-collection a:hover:after {
    width: 100%;
    transition: all 0.3s ease;
}

5 hours ago, tuanphan said:

With underline, add this to Design > Custom CSS

li.gallery-collection a:after {
    content: "";
    background-color: blue;
    width: 0;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: all 0.3s ease;
}
nav.main-nav li.gallery-collection a {
    position: relative;
    border: none !important;
}
li.gallery-collection a:hover:after {
    width: 100%;
    transition: all 0.3s ease;
}

 

Thank you so much! This worked perfectly but only for one title "illustration" not all of them?

On 4/24/2022 at 6:57 PM, C-bear said:

Thank you so much! This worked perfectly but only for one title "illustration" not all of them?

Try this new code

nav ul li a:after {
    content: "";
    background-color: blue;
    width: 0;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: all 0.3s ease;
    border: none !important;
}
nav ul li a:hover:after {
    width: 100%;
    transition: all 0.3s ease;
}
nav.main-nav a:hover{
    border: none !Important;
}

6 hours ago, tuanphan said:

Try this new code

nav ul li a:after {
    content: "";
    background-color: blue;
    width: 0;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: all 0.3s ease;
    border: none !important;
}
nav ul li a:hover:after {
    width: 100%;
    transition: all 0.3s ease;
}
nav.main-nav a:hover{
    border: none !Important;
}

 

That's worked perfectly thank you so much, the only thing is the underline is a little too close to the title, would it be possible to make the gap between the underline and the title the same as "Shop" in the picture attached?

On 4/26/2022 at 11:08 PM, C-bear said:

That's worked perfectly thank you so much, the only thing is the underline is a little too close to the title, would it be possible to make the gap between the underline and the title the same as "Shop" in the picture attached?

change

Quote

bottom: 0;

to

Quote

bottom: -5px;