Video Summary

In this lesson, we’re going to figure out how we can take these two different contact menu items and make one appear for desktops and tablets and the other one appear just for mobile. Alright. So what we’re going to do is we’re going to, we’re gonna be on the homepage. We’re going to go and we’re going to hit our inspect and what I want to do is, first of all I want to just figure out how we can target different IDs or classes that are just unique to this contact button, or just unique to this contract. 

So what I’m gonna do is I’m gonna come over here I’m gonna click my selector tool and leave you if you just go over contacted too many title if you go a little bit larger, you did the a tag, which is the link tag. If you go a little bit further, we get that nice big tattoo and that is what is going to cover the whole menu items. Because as I see the developers have the code over here to the menu item. They set up all each menu item as a list item. Alright, so that’s why you have the LI array. 

Alright, and what we’re getting here is that I’m looking over here and I’m seeing that we have an ID or a menu item, or an ID that says menu item 535. And we come down here with the other contact that we have, because we cover over this list item within HTML. We see that this menu item ID is 663. So that’s telling me that we could potentially target these IDs, because ideas are are very unique to a specific element, if you remember back in our HTML and CSS courses, but the one thing I want to check is is that is that when we go into a mobile menu, we’re going to have like that three, that three line hamburger button. So if we come here and we click the mobile icon here, so we get this this kind of three hamburger button thing right here. So if we end up clicking on this, we have a menu item that pops out here so we’re gonna want to make sure that these IDs or whatever ID or class we’re going to target that are individual for each items, is going to actually be the same for this mobile menu here. What I’m gonna do is while I have this open I’m gonna go back to my select and I’m going to hover over and as you can see, I got to the biggest space possible and I’m targeting the list item. Alright, so now I’m over here. Now I’m seeing there’s no ID so that tells me that I already did and I did for let’s say for this first contact that’s for desktop and tablets and other contact and for mobile, that we won’t be able to use it because there’s no because Because basically, when we’re here, we don’t want this contact because we’re in a mobile game. And the kind of vice versa is that if we’re over here, we might not want a contact. So using the ID as we would see back for, let’s say, over here, let’s exit out of this. And then we’d go back and target this again. And come back over here. This menu ID was not there for the mobile. So we can’t use that. But what I can see is at the bottom of every list item, they give us a class called menu dash item dash 535. And for the contact mobile, we see menu dash item dash six, six. 

But now, what we’re gonna have to figure out is, is that what is the breaking point between where this contact but a quick here goes here, and what’s the breaking point where we click on contact and it will work for mobile. And the reason how we can set this up as we can go back over here to our homepage. And let’s, and if you’re not already here, go into responsive mode. We’ll go into responsive mode. I’ll go back again. 

And I see that the wind stopped for mobile at 667 pixels. And when we go to tablets that are the narrowest width, we can’t push this any more further. It’s at 768. Alright, so what I’ll do is I’ll come over here, and what I’m going to do is I’m at 676 right now. So what happens if I click contact? Nothing, but I click contact, we scroll down and we are here. Now if you scroll back all the way up and now we click here, and we say we pump up to 768 and you can see that changed a little bit. So now if we click contact, we’re not going anywhere but if we click contact, we are in the tablet. 

And what we’re gonna do is we’re going to copy and paste this whole thing, because the menu item is very similar for the mobile version. And if we remember if we come back over here, and let’s get back into normal so you can see a little bit so if we come back over here and we highlight the look at the bottom, we have a class that says menu items 663, right, we’re not doing the IDS we’re doing the classes. 

Now if we come back over here and just double check again, so 6339663 So we’re going to do is we’re going to plug that in 633 and what we’re going to do because remember Reb is switch this to men, because what we’re trying to say is for the contact mobile is we want this one to be from basically from 768 and right and if you want to review the min max rules, by all means go back to the CSS lessons. 

At the end of the CSS course, because we’ve covered these media queries. But what I want you to do is make sure that you have your max and min because that’s what we’re splitting up right now. So once we’re right here, what we’re going to do is we’re going to click Publish, and we’re going to come back over to the main page. We’re going to refresh this so that way we have the new new settings on here. And what I want to do is I want to go to our mobile menu, and they start at 767 and we’re going to open this up and we have contact mobile here. And now we click it goes down to here. And now what happens, we go back over here and let’s open this again. And while this is open, we can push and now it is just contact. So now the contact is rolled all the way the bottom. 

Alright, and the last thing we want to do is is we want to take this dash m off, right, we use the dash M Just so we would know the difference between the contact and the contact mobile, right? Otherwise, that would have been very confusing. I know this is pretty high level stuff. But I thought putting the dash M was pretty important. But for now that we actually have everything working. We want to take this and just make sure that says contact and we’re going to save this menu right and we’re going to do is we’re gonna go back into our site. 

And now, if we click here it says contact, we don’t have that dash m and now if we click up, and we quit contact, it moves it back. But if we were safe, we’re up and we put contact again. We’re right there. So essentially what we just set up is that we were able to have two different sections here. Right? We got one for desktop and tablets and one for mobile. And we set up two different menu items. We’re when the user is using them, no matter if it’s on a tablet, a phone or a desktop this contact will work just how they needed to. And the user will not know the difference that they’re bouncing between multiple different sections. So I know this is some pretty high level stuff. But this is what’s going to separate you from other WordPress developers. And this is what’s going to make your website look awesome when it comes time to launch right. These are all defined tips and tricks that I have learned and perfected over the years to be able to become a very high end WordPress developer. So I think we have our header finally completed. I think it’s time just to go on to the next few sections and make sure that everything is working as is.