Any way to make a hover animation under the header texts in Shopify Dawn theme? Something like link

[qwuco]

Something I wanted to apply: https://streamable.com/l49ekm

My current store: https://qwu.co/

[Shadab_dev]

It is possible with some css.

[qwuco]

Would appreciate it if you could share some tips on how to integrate that design. 🙏

[Shadab_dev]

Will look into it and update you

[qwuco]

It is very much appreciated @Shadab_dev. 🙏

[Shadab_dev]

So in your base.css file under everything try this code

a.header__menu-item::before, ul.mm-submenu.tree li::before {
content: '' !important;
transform-origin: 100% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s;
}

a.header__menu-item:hover::before, ul.mm-submenu.tree li:hover::before{
transform-origin: 0% 50%;
transform: scale3d(1, 1, 1);
}

if this works great, if not then i will need collaborator access to your store. Doing it from the inspector is just a pain.

[qwuco]

Hm it doesn't seem like it works... May I send you the collaborator access?

[Shadab_dev]

Yeah, that would just the work more convenient.

Also you need that underline effect on all items, ri8?? So items in sub menu and the top ones or just the sub menu items.

Since every header item has a submenu it would be more logical to add hover effect on sub menu links

[qwuco]

Actually, if the hover effect can be added onto the header menus, I would probably remove the submenus and create a category page for it instead. How would we go about adding you into the collaborator thing?

[qwuco]

6781 here's the collaborator code

[Shadab_dev]

Okay. i have requested for access. To be honest if you don't really need it remove the submenus. I am confident to add that hover effect it would just save some work and also lessen the probabibility of code clashing in any way when you make updates.

[qwuco]

Hey @Shadab_dev , just approved your request, kindly take a look.

[qwuco]

I also believe the sub menus are removed, however there is a slight issue, when you hover to it it'll show a deeper color. I wonder if it'll affect it. Do let me know if it does.

[Shadab_dev]

i get the point, the app you are using for your mega menu is applying its own styles which does not let my style take effect. now since you are not gonna use those dropdowns you can possibly remove the app

[qwuco]

It is removed already, I disabled the app itself.

[Shadab_dev]

Yes, and my code also works now. I have added that to your dawn theme. 

https://qwu.co/

[qwuco]

Hello @Shadab_dev! Yes, it looks absolutely amazing! But is there any way to make the line under it disappear after clicking it? Right now, it leaves a line after I clicked on the page.

[qwuco]

@Shadab_dev https://streamable.com/h2keqv here's the issue.

[Shadab_dev · Accepted solution]

Done