 hey welcome everybody my name is ready and you're watching my channel ready the brand today's video was requested first of all thank you for the request this is a part of another video that I've done which will be linked in the description below and actually this video will be just put in the playlist if you're not familiar with the video we created this custom theme which you can check out in the description below and now let's focus on the video so there are two things I want to do the first thing is I want to do a drop down menu for this and also I want to fix it on mobile so we don't have too much work to do but I just downloaded this from github and that's why it's a little bit broken so we need to fix this and this is broken because we haven't actually assigned a menu to it so first of all let's go to work on one's menus and let's create a new menu so create menu and this is going to be our new menu and we just need to take this box this is the custom menu that we created originally in the previous tutorial WooCommerce custom menu so if we save this technically speaking if I was to go back to the website you will see that the menu is working and obviously the items will be slightly different now but it doesn't really matter for this example so the first thing that I want to do is create the drop down menu so let's go back and let's create a dummy drop down menu so maybe in the shop we can drag my account maybe cards and check out I mean normally you wouldn't do this but just for this example that should work and then if we refresh you will see that our menu is slightly broken what happens in here is if we inspect the items first of all we have let's have a look at the end here we have a list and this is the shop link so under the shop link we actually have another unordered list with a sub menu class so we can actually use this to our advantage to first of all hide those elements and just show them when we hover over on the shop so let's have a look at how we can do that I'm going to grab this class sub menu and go back to the css so first of all obviously make sure that you're running lifestyle compiler and just go find the header styles if you're following along and then find the menu links here they are and let's have a look we can do all this in the nav here is our menu and menu item so first of all let's hide the sub menu to do this we can do sub menu and an inside here we can do display none save this let's go back refresh and as you can see the drop down menu is gone obviously if I was to hide this for a sec that would make it look a lot better so yeah that's looking that's looking a lot better now and now the next bit will be to when we hover over this to show the menu now I'm going to do a very basic example here so what we can do is under here on the menu so inside here actually inside the menu item what I want to do is when we hover over a menu item we want to display the sub menu as a block we can do an percent hover and then we can do dot sub dash menu which is the class that we want to toggle basically and what we can do is display as block save this and let's have a look at what happens so if I refresh the page and go over shop you'll see that the menu is appearing but it's actually breaking a lot of things so there are a couple of things that we need to do first of all but it should be a very easy fix if we go to menu link for example all right so what we want to do is scroll down to the sub menu and the most important thing here is to position the sub menu to be absolute to the menu item I believe yeah and if this is not relative then we can position it as relative as well we'll have a look so let's do that first of all let's display this as none and let's reset any padding because this is a ordered an ordered list sorry so padding can be zero then we need to position this we need to position this as absolute so it doesn't break and then we can set a background color to something like white there are probably variables that can use from the top but let's just simplify and then we can do maybe minimum width for every single for the whole menu to be 140 pixels sorry and then we might as well put the setting this at one just so it goes over and then let's save this and see what happens so if I was to refresh now and hover over shop you will see that we're getting the menu and it's kind of working but of course I would rather have it stuck underneath and we can do that fairly easy so every single item in here it's a list so we have a list with the menu item in here so what I can do is target that so inside here I can do menu dash item and then inside here we can reset any padding sorry and then display as block which hopefully will bring every single link was a link or list in a new line so if we were to hover over again as you can see this is working and there now a minor fixes that we can do for example we can make the links to extend for width here so they easy to press maybe we can give it a little bit of padding but just like this we created a super easy drop down menu but of course this is a very basic version that just works so let's have a look at how we can fix the rest first of all so inside here we could potentially do an a and just maybe actually the color is already good so I want to change the text decoration to be none because I don't want the text to be underlined the to make the link full width I can do display block then I can give it a little bit of padding maybe like zero and then so zero top and bottom and one ram which is like 16 pixels potentially left and right and then each link I believe has a list at that list we can remove any padding zero display as block again and then do we want to send centerlining potentially so we could do text align center let's save this refresh and as you can see just like this we created our menu and also if you wanted to hover over this and also if you want to change the color for example we can do inside da we can do another hover so let's do hover and then background color and then that would be background color of I don't know ddd anything to make it not white I guess save this refresh and as you can see we have a basic hover of course I didn't really spend any time on the design here it doesn't look very nice but with a bit more padding I think that could definitely look a little bit nicer maybe just like 0.6 ram I think that might look nicer yeah I mean yeah we're a little bit more padding that could look very nice but just like this we created the drop down menu now let me show you how now let's focus on the mobile menu all right if we go down we actually done this in the previous tutorial and if we click on the hamburger menu here you will see that the menu is popping up but it's a little bit like broken so we definitely need to fix this luckily this is very easy to fix so there are a couple of ways we can do this first of all let's find the header and find the menu so here is the menu and at the moment we are actually toggling this with JavaScript so if I go to scripts you will see that on document ready we are clicking the menu link the hamburger menu and then that's just toggling the original menu slowly you can make it fast or whatever um and then but because this menu is actually inside this little container here on the left side that's why it's breaking so what we can do is we can create a custom mobile menu to do this we can go to the header dot php we can actually copy this and maybe even under the header we can create another div with the class name of mobile menu so mobile menu and inside here we can paste the menu sometimes you might see that websites have a specific menu for mobile so we can definitely create a custom one so let's have a look menu so we could create a custom one for mobile just like this and do specific stuff for mobile if you wish so we'll copy this change it to mobile menu and from from WordPress I'll probably let me show you how we can actually do it without that so at the moment I just copied this menu here which is the main navigation that we're using and if I was to save this and go back to the website refresh of course it's gonna look like this so this is half of the job done already so what I would do now is I'll try this and then when this button is pressed out then pop it up so what we can do is now that we know that we have the menu class in here we can go to scripts.js and just change this so this is the toggle function so we want to toggle this class here mobile menu and let's do mobile menu and save at the moment if we refresh this will be expanded but jQuery would be smart enough to actually toggle it back so if I click on this it will toggle it out and if I click it it will expand so what we have to do now is actually hide this first of all and we can hide this or and we don't have to set any media queries in this we can just hide it can I do 100% okay let's hide this so the mobile menu is the one that we want to hide and actually we can do this straight after the header maybe so let's go down let's find where that is I think it might be around here so let's do mobile menu and let's hide it whoops we can do dot mobile menu display none and we are done here so just like this we fixed the mobile menu it doesn't seem to be working did I misspeller mobile dash menu mobile dash menu um maybe oh okay sorry I'm still in the header here and that's why so yeah I'm still in the header so we need to find the outside of the header inside here okay my fault so as long as we outside the header and we display the menu mobile menu as none save this let's go back to the browser refresh and as you can see we are pretty much done now so if a person is or menu is popping up and if I hide there it disappears now obviously those two items are normal items and these are drop down menus so what we're gonna have to do is just style them a little bit I'm not gonna do anything fancy let's just do a very basic one so let's go back to styles and I wonder where to style them maybe we can actually just do it inside here I think that would make a lot more sense so it's all together so what I'm gonna do is do that dot menu and then inside here let's remove any of the padding of the unordered list and then we want to set the list these are lists inside here that's why they have the dots so we want to reset these to list style type to none and then for the links we can do a couple of things maybe just do you give it give every single link a little bit of padding so 0.6 ram and then one ram which is equals 16 pixels I believe and then we can display every single link sorry we can display every single link as block so they block so they take the full width and they easy to press and then maybe we can even display the text center and did I remove the text decoration probably not text decoration none okay if we refresh now you will see that this is already looking a lot better but the drop down menu is breaking so first of all we'll have to hide the drop down menu and to do this this is using this sub dash menu class and then just like the above menu actually and then all we need to do is display this as none now sometimes if you have a very big drop down menu you might wish to just leave it as it is it's knowing how those pages are stuck in it like this but of course if we change the links it will look a little bit better but yeah usually if you have a very big drop down menu you might wish to just keep it like this and that would work absolutely fine let me just quickly do change the menu just so written password and then if I click on where's menus appearance menus I could go to desktop that would be a little bit easier and then oh interesting that we have home here and we have a couple of other pages but home didn't appear okay that's a good one to spot so I think we might just have to give or menu a little bit of margin and let's just remove this one and make it a shop let's say we do a custom one but it doesn't seem to want to what I don't want it to be so many let's add another one just to make it look nicer that should be okay so if we save this go back to or menu here and if we go to mobile this menu is getting out of the way so I might have to log out again or I can just oops okay let me log out quickly and now we go back to mobile and then if we press on this button you will see the links coming up but the only thing that I notice is that the home is not popping up which is here so what we have to do potentially is give this actually the menu the whole menu we can just give a I wonder if this is going to be a problem let's have a look at giving this margin top of 20 pixels okay this will work but let's have a look if this would be a problem we can do displays none but margin top of 80 pixels and if I remove all this now it seems to be okay so if I was to go back to mobile everything seems to be okay if I click on the mobile menu it appears and it's looking pretty nice for the drop down stuff again you can do exactly the same stuff that we done earlier so around where is it on the menu item we have to hover sub menu and display it as block so let's have a look at this if we go dance menu we don't have a menu item here is it let's have a look so menu item so we have menu and then menu item okay so I can do menu and then inside here we can do menu dash item and then hover sub menu display block let's have a look at this now so expand shop is the only one that has drop down and and this is actually breaking it because shop is a link so this is something that you might want to consider maybe shop at this point will have to be an empty link and then when we press it yeah because we don't have a hover or mobile I guess well that's why you could do a separate menu and this will have to be an empty link what I mean by empty link is if we go to WP admin we could do admin password and we could go to appearance menu and create for example let's create a custom one so this will be empty and this will be shop just like so then we can add it maybe here at the top and we can stack everything underneath excuse me remove save this now technically speaking if we go to the website if we go to mobile I had to have to log in again that's really annoying but if you go back to mobile then if we press this and if we press shop you'll see that the links appearing but they just need to be styled a little bit so to style them we'll probably do exactly the same thing as here sub menu display none um yeah I mean pretty much this can be copied or we can get grab this and put it outside so we don't have a duplicate code potentially so let's save this let's have a look one more time shop uh yeah okay that's why we'll have to probably have separate codes for each individual but maybe I'll just remove the position of absolute and that would fix everything yeah okay that's fixing everything but the next step I would personally do is maybe like put them as a like but change the color so you can see that they're dropped down so they they I would put an arrow next to the shop so it looks like there is a drop down menu and also I would somehow maybe put an arrow before them just so they look like they're inside the shop if that makes sense but these are design changes that you can do and I'm going to wrap up the video now thank you very much for watching if you found this useful please consider subscribing to my channel um if you want to see the full video the link will be in the description below and as always thank you very much for watching my name is ready and you watch much I ride the brand thank you bye