Peachtree Fence Part 13: Gate Service, Querying FAQs, Primary Navigation & Mobile Modal Menu

0:00:00
Alright guys, I am back and just wanted to show you I was doing everything right. Because I’ve used ACF, Advanced Custom Fields for years and years and years and years and years, when I built the query, I put FAQ underscore categories. And in MetaBox, because I was going to here and I looked up here and you see the taxonomy right there, uses a dash and not an underscore. So the minute I changed this from an underscore to a dash, everything else being the same, field of slug, terms of gate installation, save, I ended up getting the query correctly. So now we refresh and we see our questions are queried properly. So it’s just a dash versus an underscore issue. That was frustrating. Okay, so now what we’re going to do is we are going to resave this and this is going to be rename. We’ll say intro. This is like intro content and we’ll go back to admin. Actually what we’re going to need to do is copy that section back to admin. I don’t know if we can put stuff directly into the library.

0:01:31
We’re about to find out. No, because it’s technically a template. If we go to templates, no, they’re not in there as templates either. All right, let’s try to add something just to the block library. I don’t never try to do it this way. Block category is going to be content. We’re going to call this intro. And we’re going to hit publish. And then we’re going to add it. I always do it from a page level. Like I always have a page and I just categorize them there. And then I have the setting to add all the all the blocks on that page into the library. And we’re going to try it this way. So there’s my intro and I save. And I back out.

0:02:14
And I’m going to generate screenshots. And hopefully this is going to work update. Now let’s go to gate service. Let’s close our tabs here. And let’s edit this service. All right, let’s go to resources and invato elements. Gate maintenance or something. Let’s look in photos. I’m hoping they have something that I can use. Gate installation. Oh, wow. Okay. I’m working on a door and it looks like a clown. So that’s not going to work. Okay.

0:03:11
Oh, geez. All right. I’m going to need to get a photo of one of their guys working on a gate. But let’s do this. Select. Oh, my God. Added them all again. I feel like I’m just dodging the, the, the, the cons of each tool that I use. We constantly have just like dodging there like, yeah, dodging their cons basically. Okay. SEO headline, gate service and maintenance. Get your existing gate service by our gate professionals. That’s all this stuff’s going to change. I just need placeholder tax that’s not completely lorim. It’s some diced.

0:04:19
Okay. Update. View. Okay. Looks pretty good. And if you look down here, get a free no obligation service name quote. Because we have to. Edit the card. Having. All right. Let’s look here. We’re having to provide free estimates for gate service and maintenance for both residential and commercial projects. Get a free no obligation gate service and maintenance quote. Okay.

0:05:00
All right. All that’s automatically done for me. Now I can edit this page in oxygen. No. See, I don’t want to edit the service page template. All right. I’m going to edit this in oxygen. And we’re just going to add a bunch of stuff from the library. And let’s see if our intro is there. So, pastry fence, content, boo. We don’t have an intro. Well, that would have been too easy, right? Yeah. All right. We need FAQs.

0:05:43
We need a YS. We need a process. I don’t even know if we need a process here. We don’t need a process on this page. We need a YS. We don’t need sub services. I don’t even think we need a project gallery on this page. Social proof would be good to have. Why did that not save the intro to the library? I literally put it in the block library. Is it over here then? When I add… Add all of our friends just got here. So, that’s good. It’s not in reusable either.

0:06:31
So, where does it go? I added it to the library. It’s not in the library. It’s not in… Reusable. What’s the point? What’s the point of adding a block to the block library? Oxygen block library. It’s right there. It’s published. It’s got a screenshot. It’s in a category. What else do I need to do? It’s called intro. Refresh the builder.

0:07:09
Just in case. Maybe it wasn’t finished saving, Kevin. Fair enough. We’ll give it another go. Okay. I guess that was the problem. My fault. Add that up. Okay. Good, good. Add content. Y us. Add social proof. Add FAQs. Okay.

0:08:00
I probably should have done all that query work. Before we save that to the library. But doing it again helps you learn, doesn’t it? So we’re going to go text query. Add value value value. I know. We don’t need a value there or there. We need values here. This is going to be taxonomy. This is going to be field. This is going to be terms. The taxonomy is fact dash categories. The field is the slug. The terms is gate maintenance. And there aren’t any in there yet.

0:08:53
So we will go to the back end. Projects. FAQs. FAQ categories. Gate maintenance. That’s correct. Okay. So we’re going to add new. Question number one. La, blah, blah. Gate maintenance. Publish. Add new. To. La, black.

0:09:37
Gate maintenance. And number three. Black, black, blah. Gate maintenance. Publish. Okay. Okay. Okay. Now. Add section. None. Save. Okay. This is going to be all these need like their correct headings. You know?

0:10:21
So this is all going to be a copy job. And I do not write copy on video. Because it’s my brain cannot work like that. I can build things on video. I can’t write copy on video. So that’s going to get done behind the scenes and just all put in. All right. Save. Front end. All right. That looks good. Oh, these reviews need to be categorized as well. But I don’t think he has enough reviews for every category. So we actually made this use random. Random reviews.

0:11:06
Okay. So now we have all our three main things all are good. Where do these go to the correct place? Yes, they do. Okay. Perfect. I think I do. I decided I want to add the two little tabs back above here. But I’m going to add them almost as buttons. Not like the default WS form builder tabs. I need to redo the nav now. And then I need to make a mobile menu. And I think that’s what we’ll do at the rest of this episode. And then I’m going to go ahead and do copy behind the scenes. We’re going to come back.

0:11:43
And we’re going to figure out what little things are left to like tidy up. Right. Before I leave this page though. Oh, yeah, we didn’t put a gallery on this page. Literally just content. Why us. Did that do this correctly? Did it save since overlaps? Yes. Reviews and FAQs. Okay. That’s all good. Okay. This real quick. Templates.

0:12:10
Okay. Primary template. I think I’m going to build my own custom modal for the mobile menu. So I’m just going to do where you’re just going to start with the desktop menu. So it’s going to be pro menu. It’s going to toggle to mobile. Never. It’s never going to toggle to mobile. Fence installation, gate installation, gate service. This get a quote button is going to need to go. No, it’s not. It’s not going to need to go. We’re good because I’m not going to use the mobile menu. This is not. This doesn’t need to go.

0:12:51
Okay. So really the only thing I need to do is really use the customizer, I think. So we’re going to use full menu. Now navigation main menu. Here we go. Add items. Perfect. Okay. Let’s do about. Let’s do. Not latest projects. I don’t think we’re going to do. We can do our work. We’re going to need to build a portfolio page, I think. Our work.

0:13:36
It’s going to be different from latest projects. Latest projects is something else. About our work. I’m going to make a services. Do we already have services. Services single page template. Services is a CPT. That would actually be like an archive page. Services archive. About services. Then this is going to go under services fence installation. Gate installation. Gate service. Let’s see if we can get a preview of what’s going on over here. I guess we can’t.

0:14:19
I guess that’s too much to ask. Let’s go to the front. Okay. Good. About service archives. Our work. All right. We’ll add. No, we don’t need get a quote. We don’t. Well, why did it put those under there? Okay. Wow. Oh, it just hates me today. That’s all it is.

0:14:49
You see in this. All right. Add items. Get a quote. Contact us. Contact us. I think I’m just going to put in the footer. About inquiry. I’m going to have to. Our work. Okay. Service areas. We’re going to tackle all that later. Vacues reviews. I will probably put a reviews.

0:15:18
We will do like a review archive. Look at this nonsense, dude. We’re re-nesting my pages when I add a new top level page. Publish. How are we looking? About service. Well, we don’t want to say service archives doing services. Reviews. Get a quote. Contact us can be up in the footer. You can get a quote or get lost. That’s what you can do. All right. Button primary. Didn’t I change that to be white text?

0:16:10
Automatic CSS. It’s going to automatic CSS. Button primary button text. Varshade white. Maybe that is white. I don’t know anymore. I’m blind. All right. We’ve got to fix this drop down. But apparently I have to refresh our template to do it. Because oxygen as usual does not give you a usable drop down icon. It gives you a giant clunky nonsensical icon. That’s drop down. Drop down icon. Carot.

0:16:55
Down. Size. 20. No. 16. 14. Icon margin. 0.5. 0.25. Okay. Boom. All right. Now what we need is drop down child links link padding. I think one is going to be too much. But we’re going to give it a shot.

0:17:38
Let’s see. What we also need to do is when that drops down colors, child links box shadow. Var based ultra dark trans 10. It just looks like you need 10 nonsensical single digits, 10 ten minutes that get the best, not showing up is there. There’s one missing, not showing up. Oh. All right. This needs to be like zero zero. Actually line height on these can be 1.2 that’ll help. Now we can actually do one in one and then these need to be 1.5 and 1.5 and where my box should have go.

0:18:59
That’s going to be too dark. I don’t know, maybe not. Box shadow drop by, drop down icon, drop down colors, drop down child links. Is there no border radius? There it is. Alright, let’s see. Oh, it doesn’t have a color. Var shade white. Hover back on color. Var base ultra light. Hover color, link hover, text color, var primary hover. I don’t like the var primary hover. I’m still doing it anyway. Okay, that’s fun. It’s using the var primary.

0:20:09
Okay, that’s pretty good. The box shadow, it could be better. It’s a little 1990s right now. Where’s my best up drop down? It’s okay, box shadow. Let’s try this and go back to here. That’s better. It’s softer. Okay. Fence installation, gate installation, gate service. We also, I don’t like it coming up from the bottom. Drop down child links, drop down, enable drop down, fade up. I just want to fade. There we go. Okay, our work reviews.

0:21:12
Let’s look at the other one, peat tree fence. Digital gravy.dev about latest projects, reviews, contact us. These are already done, too, aren’t they? Oh, projects in Portfolio is not. We can whip that up pretty easy. But about is contact us is, we need a spot, maybe for the phone number up here. I don’t have anything in Roast Center right now. But if I were to add something. Oh, no, it looks a little. Looks like things are a little busy up there, maybe. I’m not talking anymore. Sorry, I got too tired and I’m not talking anymore. You guys are just watching now. Okay. I’m just playing around with it.

0:24:00
I’m just trying to make something work about services, our work reviews. That’s not bad. These things are very prominent now. This may work. I do feel like it needs a little more. I don’t know. What color are those? They’re var-base. Dark. Maybe I should actually make them lighter, like maybe even change their opacity, which I can’t do in oxygen without writing custom CSS. Let me just see what this would look like. I don’t know. Definitely don’t want to do that. I’m going to have to let that marinate too.

0:25:41
It’s definitely workable. There’s nothing like really wrong with it. What we need to do now is go down to 992. Here we are here. I really feel like just here, let’s just get rid of it. Let’s just go none at that point. We’re going to need to build our own at this break point right here. Now we’re going to add an icon. This is going to be called mobile menu icon, mobile menu trigger. OK. And we’ll do linear. I think, these may be two thin. Let’s see. Yeah, that’s going to be two thin. So let’s use fun awesomes called bars.

0:26:51
OK. Size left, M2, 34. OK. I think that’ll be pretty good. Down here, now we lose the button. We just have a phone number, which makes total sense on mobile. This now needs to get to like 24 pixels. It being in there is going to be a problem, isn’t it? So we need that to actually be in the center. Oh, come on. Come on with the dragon drops. The dragon drops is killing me at all times. What am I doing wrong with this? Anybody know? OK.

0:28:00
And here really needs to be lay out none. And then when we get to here, we need to lay out, we’ll just display flex. And super unfortunate that it just has to be floating there in the middle because the way this header is done. But at least now our logo won’t be squished to oblivion. Let’s leave the phone link like that size. Let’s leave the phone link like that size. 24 rim. 14, 16, something like that. Let’s do 12. 24, we can go down to 22, maybe. Still pretty good. We’ll have to check that on an actual mobile device. All right.

0:29:30
So we have our desktop. Now we have our mobile. But that needs to trigger our menus, which we have not built yet. So we are going to add a modal and great. Just add it slap dab in the middle of the page. Then we have our Genelefator. We can’t move it anywhere I want it to be. How about we move the sub footer above it. All right. There’s our modal. We’re going to call this mobile menu. And it’s going to be triggered at 12, 80 and below. So let’s think about this for a second. Mobile menu, we’ll do a div.

0:30:21
Mobile menu, inner. Okay. And let’s put a heading. Let’s do this mobile menu, inner. We can go var. I actually want to see what this looks like at 1280. It’s in my room we have to work with. Okay. And we got to remember that the width of this is 70%. So we need to be 100%. Or we actually need to be VP max. I don’t think that variable works. 100% max with var VP max. No. Did I make a very, I made a variable for that.

0:31:20
Look at that. All right. So that gives me the VP max. Which is consequently 1280. The problem with that is there’s no space. So I guess because the width is still going 100%. Okay. My brain is stopped working now. VP max. 95%. But why? Why is that no? Oh, because it needs the width. Okay. 95%.

0:32:01
Okay. This is what we’re working with right here. Now, mobile menu, padding, none. And I should be on the inner at this point. Var space L. Fly all. Probably not needing L. We’ll probably do M. We definitely don’t need an H1 here. Let’s do an H3. How can we help? Div. Mobile menu. Links wrapper. This is going to get a margin top.

0:32:52
Var space M. I’m just like literally I have no idea what I’m building yet. I’m just seeing what we can do. On a half functioning brain. Okay. So we’ll do grid 2 here. Div and div. Gap M. I’m just going to throw an image over here. And. Look for something super super nice. You know, like. Come on. These are not all the files. Let’s load more, please.

0:33:44
All right. Something that really is something like what do I just see? I just saw it somewhere. Um, no, no, no, no, no. Jump to first load it. Okay. Those are all of them. Huh? All right. Here. Oh, this one right here. Okay. Oh, the E cam live windows in my way select. Want to make that smaller. Small, small, small, small, small.

0:34:25
Okay. All right. There we go. That looks nice and homey. Let’s do rounded M. I wonder if we should just. Okay. Bear with me. Okay. Why is there extra space up there? Oh, I put that on there. Okay. Never a good idea. Okay. This is going to be.

0:35:08
Mobile menu content left. And we are going to put a stretch class on this. And now this is going to get that. Well, we can just use all classes. We’re only building one of these things. Oh, it’s not hero links wrapper. Mobile menu links wrapper. Okay. That was supposed to get the margin. Top. No. This is not the links wrapper. Oh, my lord on earth. What is going on? Dude, what just happened?

0:35:59
Why can’t I go backwards? Okay. This is not a links wrapper. Okay. Jeez. Okay. Link. These for sure need them. Okay. This is going to be home. And then this is the links wrapper. This would be a grid. Two. Zero. 100%.

0:36:46
Actually, I guess the minimum with these needs to be… We’ll probably do like 15. Something like that on the rim. This would be var space XS. Actually, that’s probably going to be… We’ll just do 0.5M. These need to be typography line height 1 or like 1.2. Okay. So we have home. About us. Fence installation. This needs to be custom CSS, flex 1. Oh, yay, yay, yay. Okay. We’re going to have to align items to the start.

0:37:47
Actually, I think I can just do that in my… Because this is the custom grid here. Right, stretch, start. Item alignment. That should be aligning those start. Okay. Why is it acting like it’s doing space between… 0.5M. Auto, match how to tell us child. Okay. All right. Let’s take off that flex 1 then. And this will be 1M there. And we can do 1M there. Okay.

0:38:42
Home about us. Fence installation. Home about us. Fence installation. Gate installation. Gate maintenance. Contact us. Okay. Contact this needs to be at the very last link. Fence installation. Gate maintenance. Fence installation. Then gate installation needs to go next. Then gate maintenance. Come on, man.

0:39:39
Dude, I’ve had enough of oxygen’s drag and drop. Fence installation. Gate installation. Gate maintenance. Our work about us needs to be second. Yeah, that’s the thing. It’s not putting them in order. It’s going left to right. And I forgot how to think you can change the order. So it doesn’t go across. Home about us. It’d be easier if oxygen wasn’t so freaking temperamental with its stuff. Fence installation. Gate installation. Our work.

0:40:35
Okay. The way that we need to do this is. We need to be duck, Kevin. Duh. This is what happens when it gets late. All right. Div and copy. Okay. Pop this in here. Pop this in here. Pop this in here. Pop this in here. All right. We can put contact us in there. All right.

0:41:06
We’re just going to do it this way. So we’re going to do margin. Bottom one. All right. I think that’s going to be fine. Okay. So home. Fence installation. About us. Gate installation. Gate maintenance. Our work. Get a quote. Contact us. What else do we want to do?

0:41:50
Pay. Pay an invoice. Pay an invoice. Work. Reviews. Okay. Now what we can do is grab this div, vertical, and middle. And then how can we help? I actually want to accent this. Like that. How can we help? Okay. Good. Good. Good. top anymore. This already has a margin by. This doesn’t need a margin top. It just needs a smaller one. Okay. How can we help? Maybe now this can go from pad M to pad L. And maybe this grid can get var space. Why is it doing that? Var space M. Okay. I think that’s pretty good. Except let’s go image. Let’s do height 40 like that. I wonder if all these can be bigger. I think it would be okay if they were more spaced out.

0:44:00
And maybe if. Now I regret doing this as an oxygen grid. Oh, did I? No, I didn’t. Never mind. So I can do grid. Three two. Auto three two. This is going to be object fit cover. This is not going to be rounded because I don’t want it rounded on the inside. So I want to go to borders. Individual. Top right. Oh, it’s already done by the card. The card’s got it handled. Okay. And then below this. I can add a link. This is going to be a phone. Link large. Phone link. Okay. And we’ll come down here and grab this. That’s inside the grid and should not be. This just needs to be custom CSS flex one. Okay. All about a sense insulation. We need these to be black though. I just need to go to the typography tab. Var base. Let’s do base. Okay. The hovers are fine. All right. 678. Wrap with div and go horizontal middle. I need to look at the structure panel. I’m going to flip me to the top so y’all can see what’s going on down here. I don’t know why this grid is so hell bent on being tall like that. I guess because it’s being stretched. Okay. But I don’t know why it’s putting this content at the bottom like it is. I only did that when I wrapped it with a div. It’s acting like there’s another element right there. And I just I don’t know what’s going on. Somehow got a random padding in it. Now I’ve removed the layout and it’s still doing it. So I just I just don’t know. All right. Horizontal.

0:47:34
We’re going to call this mobile menu footer. Let me make sure it’s correct in the structure panel. So we minimize all this stuff. We’ve got our yeah. That’s our link wrapper. This is our inner and we’ve got the div under the link wrapper. That is all structured properly. So mobile menu footer. All right. We’re going to add link. What on earth is happening. Legal and text copyright 2021. Pistry fence and gates. Okay. This is 2022. All right. Let’s put this under here. Oh, because the margin top L is on that link. I thought I put it on the wrapper. My fault. So mobile menu footer needs a margin top of large space m. This needs a margin top of m as well. And I want to flip their positions. Okay. Here we’re going to go typography. Var text s color var based light. Nope. Shade medium. Yes. And mobile menu footer style sheets. Let’s put this in general. Mobile menu. Let me zoom in for you guys. Mobile menu footer. All direct children. Margin right. One m. Last type. I guess I can’t do that. Mobile menu footer. Last child. I don’t know. We got to add something after this, I think, to see if it works. Margin right. Zero. Zero. Why is that moving it over to the right? That seems like it would be the opposite of what it should be doing. All right. So last child margin right. Let’s just do this. See if we’re order one pixel solid red. There we go. It’s targeting it correctly. Okay. So yeah, we do margin right. Zero. Okay. Cool. Delete that. Okay. Legal copyright. Zoom out. This is what it’s going to look like. Now what we have to do is get this to be. Oh, this one can actually be a normal accent like that. What’s going on with that? It’s just behaving so weird. Okay. May I say menu?

0:52:01
Sorry. I’m too tired to continue talking. I’m just going to keep working. Okay. Okay. All right. We got to get this bad boy to fire. And then I got to get out of here. We got friends coming over. All right. Modal in line. It’s been a long year. Trigger. User clicks element. Trigger selector is going to be. How do we do? What did I learn last time? If you do this at the idea, no, no, no, hold on. Okay. I remember how this works. Mobile menu trigger, which I think we’ve already done. Inspect mobile menu trigger. It is mobile menu trigger. But it’s not a link wrapper, but it shouldn’t have to be a link wrapper. That’s why I learned the last time. Mobile menu trigger. Come down here. Modal trigger. Okay. I think I need a period in front of it. Refresh. There it is. Okay. It’s pretty decent for being just whipped up, right? I don’t know where. All right. Let’s go to mobile menu trigger. Up here, please. Persever pointer. Okay. Now we got to do is on lower devices. Let’s come down. See how this degrades. So 992, we look like this. 992, I think we can ditch the image. This is a, okay. All right. I got it. Let’s go structure panel. There’s a lot of dibs over here. So grid auto 32 is probably I should have not used auto because it breaks fine there, but not there. So let’s take off the auto. Grid 32. Am I the wrong div? What the hell just happened?

0:55:27
Yeah, that’s not it. Let’s go backwards. Something moved out of somewhere. We got a div that moved out of another div. Because that was like catastrophic. And that’s just removing that one class and replacing it does not do that. Dude, are you serious right now? It lost its styling. Dude, all that lost its styling. What just happened? All of this stuff just lost its styling. Literally everything just lost its styling. Oh, because I’m on the desktop device. Okay, calm down, Kevin. Calm down. Crisis averted. Where are we? I need a raise. Okay. Jeez. Okay, we’re here. Okay. Grid auto 32 becomes grid 32. Grid 32. Okay, at this break point, that’s L. So we’re going to go grid L. And we’re just going to go into one column, bro. Just one column. And then we’re taking this image and it’s wrapper. And we’re going bye-bye at this break point. And it’s going to leave us with that. And then we’re going to go down to M. And that is still as golden as a goose. At this point, we got to go with grid one. And we’re going to go with a zero pixel gap on the rows. And we should be all good. That’s amazing that I’m telling those to stack. And they’re not caring about stacking. Like I get the Jeraflex row there, but I told you to be a flex column here. Is it not? Yeah, wrap. Okay. Wrap wasn’t turned on. Wonderful. Oki-dokki. One more thing. We need a little close model. We need a close icon. Okay. So let’s go in here.

0:58:44
Oh, this is interesting. Let’s wrap this with a div. Let’s make it horizontal. Let’s make it middle. Let’s make it left. Let’s add an icon. Cross. No. We had this problem last time. Where’s the X? Here we go. Twenty. Two. To the left of menu. Why are these things not aligned middle? This has a margin on it. No. Yeah. One in. Now that kind of looks funky, doesn’t it? Let’s take off the accident left. I need like oxy. What is it? Oxy clothes, something or other? Oxy clothes, a model. And on that we’re going to put cursor pointer. Okay. All right. So that should serve as a close button now. I still think this needs more spacing. That’s better. See what it looks like. Okay. That closes nicely as we scale. Oh, good. We’re going to have to check the height of that on a regular browser, a regular phone, device, tablet, whatever you want. I found 11. That’s interesting. I think there we can go with auto. What’s what that dude was? The width 95%. All that needs to be on this mobile menu. Okay. Yeah. That’s what I’m talking about. That’s where I put with auto. So it’ll kind of just center it. And then now it’s back to 95%. Whoops. That’s awesome. Okay. We’re going to have to fix that for sure. That’s going to be a huge problem. All right. That’s why my mobile menu would be looking all whacked out. We’re not going to fix that now though. How far are we into this? All right. And now we’re in four minutes. All right. Anyway, we got our mobile menu created. We got some stuff to clean up. But that was a big day. We got like the next two pages created. We got the mobile menu created. The nav fixed. I’m going to go in now at this point. We’re going to I’m just going to do all the content. When the content is done, I’m going to do any more layout structural stuff. I’m just going to do content.

1:03:44
When I come back content, it’ll be pretty much wrapped up. And we’ll be able to do finishing touches and all that. Okay. All right. I got to go relax. Peace.