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

Solved

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

qwuco
Tourist
14 0 2

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

 

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

Accepted Solution (1)
Shadab_dev
Shopify Partner
861 47 87

This is an accepted solution.

Done

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.

View solution in original post

Replies 18 (18)

Shadab_dev
Shopify Partner
861 47 87

It is possible with some css.

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
qwuco
Tourist
14 0 2

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

Shadab_dev
Shopify Partner
861 47 87

Will look into it and update you

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
qwuco
Tourist
14 0 2

It is very much appreciated @Shadab_dev. 🙏

 

Shadab_dev
Shopify Partner
861 47 87

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.

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
qwuco
Tourist
14 0 2

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

Shadab_dev
Shopify Partner
861 47 87

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

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
qwuco
Tourist
14 0 2

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
Tourist
14 0 2

6781 here's the collaborator code

Shadab_dev
Shopify Partner
861 47 87

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.

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
qwuco
Tourist
14 0 2

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

qwuco
Tourist
14 0 2

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
Shopify Partner
861 47 87

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

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
qwuco
Tourist
14 0 2

It is removed already, I disabled the app itself.

Shadab_dev
Shopify Partner
861 47 87

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

 

https://qwu.co/

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
qwuco
Tourist
14 0 2

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
Tourist
14 0 2
Shadab_dev
Shopify Partner
861 47 87

This is an accepted solution.

Done

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.