Video Summary

In this section, we’re going to figure out how we can optimize this contact menu item to work for mobile. Because if we because remember, if we click on contact here, this section is available for our desktop and tablet views. But we have a totally different section for when someone’s on a mobile device, right? So how are we going to account for that? 

Well, let’s just try something very quick and see if it’s going to work. So what I’m going to do is I’m going to open this up into Elementor. 

And just see if we can just add that ID to the section and if that works, I think we’re golden. If not, we’re going to get a little bit more creative. So what we’re going to do is let’s scroll down and what we’re gonna do is right click on this section, and we’re gonna go to Advanced and we’re going to copy this contact. Where we have to do is we have to go into responsive mode, and we’re going to click on mobile, because this is what shows the section that we are not getting that that menu item to work. So now if we come here and click on on this section, let’s go to advance let’s click on CSI D let’s make a contact. Let’s click Update. 

And now that that’s working, what we’re going to do is we’re going to come back to here we’re going to refresh so that way the browser can update all of the settings that we just uploaded. And we’re going to do is we’re gonna come here we’re gonna go to inspect and what we’re gonna do is we’re going to click on this hamburger and we’re gonna click on contact and see if that works. 

That does not so what has happened is, is that it’s it can’t go to two sections at once. Right? So what is what does that mean? So if you come here, is that an ID? 

In order for us to be able to in order for us to be able to click on a menu item, we have to associate it with an ID but an ID to remember in the CSS lessons means that there is a very, the ID is very unique for a specific thing. So if we have multiple contacts, that button will always default to the original and this one is just not going to work. So how are we going to be able to set this up? So I’m going to do is I’m going to do contact dash right I’m gonna come here and I’m gonna click Update. 

So we have right now is we have two menu items. But both of them are giving us the like same giving us the same options we need but the contact has just given us desktop and tablets, and the contact has just given us mobile. Well, what we’re going to have to do is rather go into our additional CSS and we’re going to target this contact section and we’re going to make sure that this is displayed exactly for the desktop and tablet settings and do and we’re not going to display this during the mobile and vice versa. Alright, so we’re going to keep this dash M for the time being. But then when we have everything the way we need to we can go here and delete this. And whoever comes in on our on our web page, no matter they come in from a mobile device or a tablet or a desktop, no one will know that there is technically two different contact buttons right here for the menu items. So let’s just pause this video right here. And let’s hop in the next lesson where we’re going to really break this down and how we can use our media queries our CSS to make sure that these two sections work.