how to add drop down menu in shopify debut theme

today i wanted to,make a video about how to make a hover,drop down menu in uh the debut theme,we're gonna start off here in this uh,this is like a dummy store that i set up,with this shop code 101 thing,and uh this is just gonna be like your,store's admin home page so just start,out there,then go to uh go ahead and you're gonna,edit the code of your store so you click,on online store to do that,in this left hand menu,then you're going to click on edit code,here,after you click on the actions drop down,all right now,my theme.css file is already open and,this is the file that we're using,users might not be open if that's the,case you can either search for it in the,search files uh search bar or you can go,down here,uh open up this assets folder,click on theme.css and it'll open it up,for you all right now,what we want to do,here,is we are going to scroll all the way,down to the bottom right,and then um,what you want to do is anytime you're,adding new code to like a shopify file,it's very important that you leave a,comment or this is what i do is i leave,a comment um kind of describing the,change and,that way in the future i know the code,that i've added to the theme file,and so if anything breaks i know that,it's probably my code and not a,shopify's code,and then i also know what things do what,and what i can get rid of what i can,change and whatnot it's just helpful so,i'm going to go ahead and leave a,comment which in css to do that you're,going to,do this bracket and then,or this this,slash and then and then an asterisk,right and then,i'm just going to put um like hover drop,down,hover drop,down,i don't know this is one word maybe drop,down menu,uh,and then,that,and then i also leave,a comment where the end of the code is,so,i go end hover,drop down,menu,all right so now uh we can add our code,so,i'll flash the code up on the screen but,i also have it down in the comment,section so,uh that way you can um,you can copy paste it uh so,we're gonna add this code in,and what this code does is it basically,looks at these classes this dot site nav,has drop down and then it's like saying,on the action and or on the hover and,focus actions,it's gonna change this these classes uh,display attributes to block right and,that basically means it's like just,gonna display them right um and so when,we go to this drop down menu,which if we look at it right now,yeah so right now it's it's um this is,like my dummy site or whatever uh right,now basically,when we we have to click this catalog to,bring up these collections and the,behavior we want is we want to hover,over it and the collections will just,pop down right so,once we add this here and we go ahead,and save,uh now if we refresh this,it should yeah see now it's popping up,right,uh the issue is now though is that it's,popping up but if we try to move our,mouse down to the collections because,we're not getting there fast enough,see that time i did but,other times if i don't get there fast,enough basically it's gonna,it's gonna change the display back to,none i believe and that way the the,element is just gonna disappear,so,what we wanna do,is we want to move that element up far,enough,where,when we navigate down we're just right,on top of the element and that way the,element doesn't disappear,and so to do that,that element has this site nav drop down,class so we can add that here,and i'll leave this in the description,as well so you can copy paste it site,nav drop down,um we don't want this to be 30 px we,want this to be 25 px,so it's the site and i have drop down,uh we copy paste this in and it's 25 px,all right so we save that and then let's,see what that does for us,so now you can see the menu is much,closer,to the or the drop down is much closer,to the header and so when i go down it's,not going to go away,and then i can click on any of these and,it navigates me to the collection,so your value here this this um px value,this pixel value here might be slightly,different uh based on like,how large your logo is over here um it,could be if you've done any other custom,coding,it could be different and so,um,you,if you have any trouble with that you,can leave a comment down below,but you can just play around with this,and get it to the point where it's it's,fine if this video helped you i'd,appreciate it if you leave a like a,comment and subscribe,i'm going to be uploading a bunch more,tutorials as i figure out more things

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

Come on and read the rest of the article!