How can I mimic this hover effect on navbar

Store Design
1

Would someone mind helping me mimic this hover effect on the nav bar ‘mamas & papas website’ when you are hovering over the main drop down with the thick black underline and then the thinner under line underneath the secondary category also if this makes sense? please see images below to see

their website : https://www.mamasandpapas.com/

our website : https://clair-de-lune.co.uk/

joshualev_0-1657095846257.png
joshualev_0-1657095846257.png661×570 13.9 KB

joshualev_1-1657095865396.png
joshualev_1-1657095865396.png465×371 8.73 KB

1 Like
2

@joshualev Go to assets/theme.css and paste below css at bottom of file.

.nav-bar__linklist > .nav-bar__item > a
{
border-bottom: 3px solid #000 !important;
text-decoration: none !important;
}

.link a
{
text-decoration: underline !important;
}
3

Hi,

Add below css in theme.css file

a.nav-bar__link.link:hover {
    border-bottom: 2px solid #000;
    transition: all .4s ease-in;
}

Hit Like and Accept as Solution

4

Hello @joshualev

Please follow the steps:

  1. Online store->Themes->Actions->Edit Code->Assets->theme.css

  2. Paste the below code at the last of this file theme.css

.nav-bar__item > .nav-dropdown{top:104%;}
li.nav-bar__item {
    border-bottom: 4px solid transparent;
}
li.nav-bar__item:hover{
    border-bottom-color: #98d1c9;
    transition: all .4s ease-in;
}
.nav-dropdown__item .nav-dropdown__link:hover {
    text-decoration: underline;
}

I hope it will work for you
OutPut : https://nimb.ws/NJ3lZx

1 Like
5

@SetuBridge_1

this doesn’t work for me mate, nothing seems to happen

6

@Shop_Lovers this works however it isnt as clean as ‘mamas and papas’ that transition doesnt fade in or out

7

@DelightCart this is a solid visible line, i was meaning a hover effect if you visit mamas and papas website you can test this for yourself :slightly_smiling_face:

thankyou anyways mate

8

@SetuBridge_1 actually this does work for me now, thankyou very much mate! really appreciate that :slightly_smiling_face: would you mind helping me with one more thing?

1 Like
9

I would love to help you. Please share.

Thanks