how to create drop down menu in shopify venture theme

today i'm going to teach you how to make,a hoverable drop down menu,in the venture theme on shopify so here,i just have a completely new venture,theme file on a shopify test store,and you can see the current behavior,when i mouse over the catalog,nothing happens what we want to happen,is when we mouse over this catalog this,animation should trigger and this drop,down menu should come down,and then also we can make it so when we,mouse over these menu items the sub menu,will appear as well,i think coverable menus are a nice,feature to have on a website they make,it look a little bit more crisp,and,in my experience they tend to improve,curt conversion rates slightly,so,to do this what we're going to do is,we're going to go into our online store,and we want to edit the code,so to do that we click on this online,store go over to actions here click edit,code,now it'll load and uh the file that we,want to be working with is this,theme.scss.liquid,and uh if that's not already open for,you sometimes it would be,but if it's not you can just go down to,this assets folder here,click on assets click on,theme.scss.liquid right,then it'll open what we want to do is we,want to go all the way down to the,bottom here,and so once you've scrolled all the way,down to the bottom here what you want to,do is you want to leave a comment uh,letting you know that basically this,code is added and that way if anything,breaks on your site ever,you know the code you've added and you,know that the code that you've added is,probably what's interacting with,something breaking,um whatever on your site and you can,tweak the code you've added versus going,all the way through all of this code,that shopify has,so uh,something like main drop down here like,i already have listed is fine um to to,leave a comment you just,as you can see you just,use,slash and then asterisk and then type,whatever and then to end the comment,you're gonna go asterisk,um,but yeah so so go ahead and just leave a,comment like main drop down here um,and then i already have this in i have,this,code,snippet i'm gonna,put it up in the video right now but,it's also gonna be,in the description of the video and that,way you can copy paste it,so i'm gonna remove this comment,commenting out and that's basically,going to activate this code snippet and,so what this is doing is it's targeting,us the site header class,which ends up being,this uh top bar here,and then it's targeting the site nav,item which is an individual,title on one of these like this catalog,or this home,and then it's saying when you hover the,mouse over that,target this mega nav and then do all,this stuff to it,and this is a mega nav is this class and,that refers to basically the this,element that pops down,so,what uh,the stuff that it's doing is it's,basically turning the opacity and the,visibility attributes to,one invisible which is basically going,to just make it so you can see it,and the element will pop up right and,then it's transforming the element and,it's using this transition to make it a,little bit smoother,and that way it doesn't just like pop up,immediately it doesn't just pop down,immediately,it will take 0.8 seconds,to,come down so this all refers to all the,transitions happening and right now,there's actually two transitions,happening,when we click,uh,you can see that that this,menu is popping coming down but also the,opacity of the menu is changing,and so this is going to set all the,transition times equal to 0.8 seconds,and then this cubic bezier is just going,to make a little fancy,as far as the the rate at which it,happens and then,the this opacity is now being set to 0.4,seconds so it's going to become opaque a,little quicker and we have the same,cubic bezier function there as well,um okay so if we go ahead and save that,and then refresh the site,now this this should work,so you can see when i mouse over,basically,we're getting this nice hover,and the transition happens,and,the only issue is that now um,when we hover over these we still have,to click these to get these to come out,you might actually want that behavior,sometimes you don't want sub menus to be,popping up all over the place,but if you don't,then,we are just going to use basically the,same sort of function make sure you,leave another comment again,like sub drop down or whatever and then,we're just going to get rid of these,comments,this is going to come out and,so you can see this,block of code works much in the same way,as this block of code,the inside is actually all the same the,only thing is that's different is what,it's targeting,so if we go ahead and save this,and then refresh here,you'll see now when we mouse over this,we don't even have to click,uh we don't even have to click it just,pops up and we can mouse over and then,we can click here,so that all works now,we can play with a few things suppose,you don't like how quickly this menu,pops up or suppose you want it faster or,whatever,it's very easy to do that if you have,the google chrome browser if you just,press ctrl shift c,it will bring up this,chrome developer tools,we can,let's toggle this device back to being,on desktop,and then we'll also toggle this,and if we just go here to sources,this is very useful for shopify so if we,go to sources basically we want to get,to this file that we're editing in the,chrome developer tools which is this,theme.scss.liquid all of your code is,going to be in this cdn.shopify.com,you open that up and then make sure you,um this will be closed but make sure you,go ahead and open up s,and then open up this files assets and,remember the,file we're looking for is,theme.scss.liquid,go ahead and open that up,and now we have this file in the chrome,dev tools so we're going to go down to,the very bottom of this file where we're,currently editing,and you can see our uh,you can see what we've added here this,main drop down and the sub drop down now,chrome makes it very easy to edit these,cubic bezier functions right,so,if we go ahead and click these right you,can see that this is the curve that is,following right now,and what this basically means is that,the,transition is not going to happen,uniformly it's variable it's happening,at variable rates throughout while it's,happening so you can see this they kind,of give you a graphical representation,of it this pink dot going,and that's going to mirror how quickly,it's happening here if that doesn't make,any sense uh i can explain it better in,the comments if you want to ask,down there so,we can change this on the fly,and you can see we can make it really,like,very very much different and that's,going to change,the rate at which this is happening,this transition,or we could make it you know we can use,one of their whatever we can make it,very like,uh uniform,and then it'll happen you can see how,it's changed it the other thing we can,change is how long it's taking right,so for this opacity let's say we want it,to be like crazy like five seconds or,something we change that and now you can,see how slowly it takes to become,um completely opaque,and then so once you've played around,with this stuff you can just go ahead,and copy this line of code,and,you can put it back in,here,just paste it and,that way,you can play around with it very quickly,in the chrome developer tools once you,get the behavior you'd like then go back,to shopify,paste it in hit save,but that kind of looks the way that i,have it that i've done it kind of looks,kind of junky so i'm going to go ahead,and undo those changes,and just make sure to save your code,and at any time during if you mess,anything up with the chrome developer,tools you can just refresh,and it will go back to it should go back,to how it was,let me make sure i didn't uh,i didn't accidentally,yeah see i accidentally changed it so uh,let me change it back,let's get rid of this space,all right so i can refresh and it'll go,back to the nice snappy behavior that it,was before,all right guys so that's how you add a,hoverable drop-down menu in the venture,theme i'm recording this video on april,1st 2021 so if,uh if when you're watching is around,that time this should uh still work,if this video helped you uh make sure to,subscribe i'm going to be uploading a,lot more of these tips how you can make,your site,a little bit,more,functional how you can,improve your conversion rate on your,site and whatnot with all this code and,if this video helps you make sure you,leave a like and a comment so other,people can find this video so it can,help them as well,and if there's anything that you're,struggling with with shopify as far as,the code or as far as certain apps or,whatever,i'd love to hear from you in the,comments section and perhaps i'll use it,and make a video out of it,so until next time guys,see you later

Congratulation! You bave finally finished reading how to create drop down menu in shopify venture theme and believe you bave enougb understending how to create drop down menu in shopify venture theme

Come on and read the rest of the article!