How To Add Hover Effect On Header Navigation Menu In Shopify
Вставка
- Опубліковано 12 вер 2024
- Today i'll show you how to add hover effect on header main navigation menu bar in Shopify for dawn theme or any theme, make drop down menu shows up while hovering with the mouse over it.
Adding hover effects to your navigation menu bar on Shopify is an important part of creating a great user experience, Hover effects on drop down menu help users quickly identify different sections within the website, and they can also add visual interest to the overall design.
When designing a Shopify store it’s important to take into consideration how people will interact with it, using hover effects on your navigation menu bar helps guide visitors through their journey and make them feel more in control while browsing around your Shopify store.
For example when someone hovers over a link or button in the main navigation bar, they instantly know what action will be taken if clicked this makes navigating much easier for everyone, So its really important to add the hover effect on drop down menu for your Shopify store's header.
Code : pastebin.com/Q...
If you have any questions or suggestions my Instagram : / anas_elmedlaoui
About me:
My name is Anas El Medlaoui and i have been around digitally for 8 years making Websites, Mobile Applications, Social Media Promotions, E-commerce etc...
And i have accumulated some experience in multiple fields over the years jumping from project to project (Which wasn't a good idea), I started this UA-cam channel after a year of hesitation to share my knowledge and experience with people that are willing to succeed online with the theory of knowledge for everyone.
#hovereffect #header #shopify
You are a saint !!! Nobody at Shopify could even help me and you just did it in 30 seconds AMAZING THANK YOU SOO MUUCHH
10 months later & it still works for dawn theme! I had to find my "/header" section by scrolling but it was still super easy. Thank you!!
Thank you so much you did a great job it really helps a lot
You're very welcome and really glad i could help.
Cheers
Super clear video and it worked perfectly on the Dawn theme!
Exactly what I asked and explained today in Shopify support!!!! Thank you that's what I searched for!
It works perfectly fine, thanks for the tip, it definetly changes the user interaction with the shop. Cheers.
How did you do that? I am trying but the code is giving me error
Bro Link doesn't work
Hi, I did the exact thing on but on the theme sense. When i try to navigate down the menu to the sub items the nav menu dissappears. How can i fix this issue??
did u get the answer?
I have the same issue on Refresh
JUST the BEST!!! you are soo good person!! giving your time and teach us!!! wish all the best!!!
Awesome, thank you
You're very welcome
I just tried the code and it worked great! Thank you for this fun feature.
Amazing!! Very clear & simple step by step! So helpful thank you!!
You are seriously the BEST!!! Thank you sooo much!!! 🙏🏾
you are briliant sir
Thank you
Thanks! Your videos help me so much!♥
You're very welcome, glad i could help.
Cheers
Works amazingly, thank you!
Best mentor ever ❤❤
bhaii maza agayaaaa
Thank you soo soo much brother for sharing this fruitful information. Could please teach us how to make website for consultations
worked perfectly....thank you!
Amazing work!! Thank you so much!
This was very useful thank you for this great content
Brilliant! Thanks so much!
Thanks a lot for this video. It works great. However, is there a way I can make the main navigation item still linked to a page?
Thank you, Anas!
very helpful guy god bless you :)
You are amazing! Omg thank you!!!
Thank you very much!
thank you for the video! You are amazing
Hi, it does success when hovering, however the dropdown disappear right away, I cannt click on, how to fix it? thank you
Hi Dear, Thanks for great efforts and its been wonderful to be like expert after watching your videos. Kindly we would like to give you some feedback to improve further. This hover effect does not work properly as its skipping or back when there's a second menu item under top menu item which need hover like in second row.
yeah, i have this problem too
Thank you so much! right solution.
You're very welcome, glad i could help.
Cheers
I wonder if this can be solved. The hover displayed menu disappears if you have sub-choices, and you scroll below those. So you can't click on menu items below anything with subsections. Well, you can if you first move back up and close the offsets. Then you can go lower, but you have to keep doing that on anything with sub-choices. Thanks!
Hey, i got that issue solved because many people had this issue, i just finished the fix video for it and will be posted in a couple of days.
Cheers
@@OnHOWGuyHey man! Is this video solved one or have you posted another video already?
It's working thank you 👍
When I hover it works, but it closes before I can reach, can you please help?
same problem for me... any suggestions?
Thank you so much man!! Love from India!!
In taste theme it is the line 304.
I tried it on Refresh and it does work for the hover part but when moving the mouse down to select an item from the list, the list disappears and doesn't let me click any item.
THANK YOU SOO MUch
Thank you!!!
Amazing! GOD sent!
You are the peoples champion! Thanks for everything, watched a few videos and all good apart from this one hasn't worked ..would appreciate a pointer, if not no drama cheers anyways!
👍👍working
Hey, i did the hover effect its working but the header has expanded to the size of the dropdown
thanks man.
Thanks 🙏
THANK YOU
Need your help. I followed the suggested steps but there is an issue. When I click a collection in the header, it does not open the link given in Navigation section.
thank you man
You're very welcome
Thank you! How to remove also the arrows on header nav menu?
very nice videos this is very helpful for me
You're very welcome, glad i could help.
Cheers
Awesome, it works.. Thanks bro
You're welcome, glad i could help.
Cheers
To awesome!!!!!!💪🏾💪🏾💪🏾
Hey! By any chance we can make the Hover effect drop down menu transparent?
Works Great
Thanks a lot.. ❤❤
Thank you very much for this very helpful tutorial.. However i noticed that after adding the hover effect code my video height aspect ratio (hero screen) became 1/3 of the screen.. Pls how do i make the video height full screen?
help me when i past this code the menu drops but but when i go to the drop menu it disappear quickly
Nice tuto, i love u
Thanks and love you too.
cheers
HI! how about resizing the box for the subcategories upon hovering it? The hovering was successful upon trying the codes, but the boxes for my sub categories were too big. How to fix it?
Hey, If you mean the width of the dropdown menu then that video is on the way.
Cheers
Can you show in a video how to make grow text or link when mouse over?
Hey I love your videos, I do not have /headed in my code. How can I work around this?
Brilliant!! may i ask how to make the menu shows in mobiles? my theme only shows the hanburger and logo on mobiles?
Thanks, most of the themes will show the hamburger icon by default so it might require some custom code that i don't have currently.
Keep in mind that there is no point of hover effect on mobile as there is no mouse to hover with, direct click with fingertip thats it.
Cheers
Thank you so much for your video!! How can we make the title item clickable? In you case, "Categories" clickable. For example I have the title menu "Shop" and in the dropdown menu "Man" "Woman", if I click on shop I want that it open a page with all the product man and women. Let me know if you have understood the answer. Thanks!!!!!!!!!!!
You probably won't see this but if you do PLEASE HELP - I am on shopify right now, my header right now is transparent but when I hover over the drop down menus IT GOES WHITE, how do I make it so the hover doesnt make the menu go white but stay transparent???
Hello please share how to change its background color. I really appreciate any help you can provide.
I already did hahah just look up my channel.
You're very welcome.
@@OnHOWGuy Thank You :)
Hola, la linea 515 no es nada parecida y no me aparece el /header
you are the best
Thank you, i appreciate that.
Cheers
What if they acces the website by the mobile?
Hi, I would like to know how to change everything in the heather when scrolling. I need the logo to change color, the 3 line menu bar to change color, the bag to change color and the background to have color (it's transparent)
hello sir im a big fun of you i have a big problem in my shopify side bar how i can change the backgroud and font color
It does not work with dawn 14.0 anymore: if you hover a submenu and want to switch to an other element in the same menu the menu is closing
Sir please make a video for hover effects on variants of products on home page please
Hi Bro, /header is not there in the dawn theme.
i have watched your all steps but i didn't see any.
What's about hover on the store header logo from a static pic to animated gif? I've been trying for almost a week
While using the code, I am getting an issue while hovering on the menu links, when I scroll down to the sub menu, the whole thing vanishes.
can you make one to remove the arrow option please
now how can I make It where I can click this video and it take me to a specific page of my choose.
say a product.
Hi Anas, I am using the code , some how can't see the hover effect. Not sure if it still works . Can you please confirm
Hey, Can you please tell me which theme/version you using ?
Please let me know in a new comment as its difficult for me now to see replies.
Cheers
Just delete the word muted and the sound comes on. How do i adjust size but ONLY for desktop view - i have a portrait shape video which looks great on mobile view - but unsure how to edit this to fit the desktop version - any solutions? thanks again!
thanks for your videos my friend, it helped a lot 🙂 everything works as u described, buuuuuuut its possible, that the first menu is also clickable? now i can just hover on it so the dropdown opens, but the main menu is not clickable
Hey! Did u find a solution?
bold hover effect.
you said you go through each comment. let's see:
my problem is the menu header has a hover effect which makes the menu items bold. I want to remove it but I failed to find a solution.
please help.
Is there a way to add an animation?
IF you mean background animation then i already made that video.
Cheers
Mine is working, but it won’t let me click on the subheadings. It disappeared when I tried to
On my end your code does work for 2 seconds and then the hover feature does not allow me to clic on any option categories because your code makes the section dissapear instantly, please help me with this.
This isn't working for me. My Theme is named "Be Yours" version 7.1.0
I went through everything EXACTLY as you said it, and it still isn't working for me. I have the Boundless theme, but it says it works for all of them so I'm not sure what I'm doing wrong. :(
hey anas, thank you for the video, it was really helpful! when implementing this, my drop down is not close to the header, so when i try to select an element on my menu it disappears right away before i click on it..
Any suggestions?
Thank you.
Hey, you're welcome and really glad i could help.
Yeah many people had this issue and i just finished a video for the fix and will be posted in a couple of days.
Cheers
Hi can u solve my problem to please
Anas, could you please make a video on how to create an Affiliate page on a Shopify dropshipping store. Thank you
im on a chromebook and i cant figure out how to add /header like you did on the video
I used the code, however the hover does not let me click on the dropdown menu items...it disapears very fast
same here how to solve it ?
Very helpful, but unfortunately i am having some troubles. it seems that if i do that twice in a row for 2 different categories, the far bottom category wont "open" and the whole Categories colapsible row cancels itself and i cannot even select the far bottom sibcategory. any solutions? Thank you
I'm having the same issue, did you manage to find a way to fix it?
In my codes, Header appears as a menu instead of /header..
Not sure what you meant, you cant find /header ?
HOW DO YOU GET THE HOME CATOLOG CONTACT ABOVE THE VIDEO?
@OnHOW i added the code in dawn theme im using megamenu , the hover works but it disappears when i want to click on a word from the megamenu how to fix it ?
Its probably some conflict in the code thats causing that issue, what theme/version are you using ?
Cheers
the hover effect is their but when i move the cursor to the second category it disappers
thanx Anas
You're welcome
Do you know any website where to find competitors that are selling a specific product? in dropshipping
Did you see my video on how to spy on your shopify competitors ? i did show a trick on finding stores thats selling a specific product.
Cheers
Bro after using this code we add hover effect on header but no able to click the sub collection in navigation bar
Can you tell which theme/version are you using ?
Please let me know in new comment as its difficult or me to see replies now.
Cheers