0:00:00
There’s a really common mistake that people make with the menus in their header that I see time and time and time again. And I want to help you avoid this mistake. I want to help you create a menu for this situation the way that a professional would. And I’m going to do this in Bricks, but you can do this in any builder. It really applies to any builder, any situation. Even if you’re hand coding a website and you build your menu by hand, this same technique, your menu by hand, this same technique, this same set of circumstances would apply to you equally. So ignore the fact that I’m working in Bricks and just pay attention to the concepts and the way to approach building a menu like this. All right, I’m going to go ahead and share my screen. Again, I’m working in Bricks. This is my header template. I have a logo and that’s it, though I do have a though I do have a menu built inside of WordPress and that’s what we’re going to pull from.
0:00:53
So when you add a nav menu element in Bricks, it’s gonna automatically pull in your WordPress menu. Now, all I’m gonna do real quick is make sure that my color on those links is dark so that you guys can see them, but this is not really a necessary step of this tutorial. Okay, so we’ve got the logo on the left, we’ve got a menu on the right. This is the most traditional header So we’ve got the logo on the left, we’ve got a menu on the right. This is the most traditional header that you could possibly think of. And what we want to pay attention to is the links that are in the header, Home, About, Services, Reviews, Blog. I’m going to go ahead and inspect this.
0:01:26
What I’m not talking about, because I’m going to assume that you’ve already watched my other videos, I’m going to assume that you care about high quality code output and semantic HTML and accessibility. We’re not going to talk about the fact that your navigation needs to be wrapped authentic HTML and accessibility. We’re not gonna talk about the fact that your navigation needs to be wrapped in a nav tag and that it needs to be an unordered list with individual list items that have A links nested inside of them. It needs to be keyboard navigated.
0:01:52
I’m not talking about any of that stuff, okay? We’ve done other videos on these things. I’m talking about one specific mistake that I see over and over and over again and that mistake is this. that I see over and over and over again, and that mistake is this. So what we need is a signup link in this navigation. We need to sign up, but it’s a call to action in the header. We want it to stand out.
0:02:13
We want it to look like a button on the website. And so how do we go about adding that? And what if we want it spaced away from our main menu element? How do we approach this? Well, here’s how most people approach this, element. What, how do we approach this? Well, here’s how most people approach this. And this is the incorrect way to approach this situation. Now, I think, again, the reason people do this is because they achieve the desired outcome, but it is in fact incorrect. So they add a button here and this button is going to say sign up. And then you know, they’ll style their button however they want. I’m just going to put a button action class on it from automatic CSS. And we might even do a button s to make it a smaller button. and we might even do a button S to make it a smaller button, and then we’ll save and then we’ll review.
0:02:55
And oh my gosh, look at this. I have gotten exactly what I wanted, and then I can move on with my life, but I haven’t realized in most cases that I’ve made a big error here. This is not semantically correct. This is a menu right here, and this is a completely separate element with its own link and this is a completely separate element with its own link and its own situation going on here. But really, this is part of the navigation.
0:03:23
This is part of a main navigation of a website. And the big problem that people run into when they do something like this is, number one, that will sit there a lot of times, but sometimes they don’t have enough room for the button, especially if they have a situation where there’s maybe two buttons, okay? the button, especially if they have a situation where there’s maybe two buttons. Okay. So in a situation where there’s two buttons, let me go ahead and duplicate.
0:03:44
And then you guys can really start to see, well, here’s one issue right here. I would have to group these buttons together. I’m going to go ahead and wrap them in a div, and then I’m going to put that second button in this div, then I’m going to set this div to display flex. Then I’m going to give this div a little gap of one M to space these out. Why is it not? gap of 1M to space these out. Why is it not? Maybe it’s just not registering. Maybe I just need to refresh here.
0:04:08
There we go. Okay, now we see the gap. Now you’re going to see the problem that I’m referring to where, oh dear, we’re starting to really break our header because there’s just not enough room for all of these elements even when the main menu collapses to a hamburger icon. And so what people realize, I’m going to get rid of that second button real quick. a hamburger icon. And so what people realize, I’m gonna get rid of that second button real quick. What people realize is, oh, there’s not enough room, or we don’t really want that button there on mobile.
0:04:35
So they do something like this. They go down to a break point where it’s not really looking great anymore, like there, and then they say, we gotta hide that button. So they go to layout, they go to display, where is display none? Here we go, display none. And then they get rid of it, where is display none? Here we go display none and then they get rid of it and they’re like oh that’s fantastic well it’s really not fantastic why is it not fantastic because once it goes away it’s no longer in the navigation either it’s not in the mobile menu nobody can access it there’s no way to get to that link and then you’re stuck with this situation where it’s like but I need that link in my mobile so so now do I have to go put it in the menu but only But I need that link in my mobile.
0:05:14
So now do I have to go put it in the menu, but only show it when it’s on mobile and I gotta get all these conditions going? No, no, no. If you just don’t do it wrong in the first place, then you won’t really have this issue, okay? So here’s what we are going to do. We are going to close that and we are going to come back here to desktop. We’re gonna get rid of our button situation altogether.
0:05:39
I’m gonna do what I should have done desktop we’re gonna get rid of our button situation altogether I’m gonna do what I should have done from the very beginning which is customize my menu so I’m gonna go to menu menu and realize hey the signup link is part of the main navigation it’s it’s when people arrive on the site they’re in the main navigation it should be an option for them to sign up and that way it’s also going to be in the mobile menu by default that’s what we want okay so I’m gonna go ahead and I’m gonna create a custom link called sign up I’m gonna add That’s what we want. Okay, so I’m going to go ahead and I’m going to create a custom link called sign up.
0:06:05
I’m going to add that to our menu. I’m going to go ahead and hit publish. You know what? We’re going to throw a contact us in there as well because you guys might want an example where hey, can I get my two button situation going with this technique? Well, yes, you can get your two button situation going with this technique. So I’m going to go ahead and hit publish there. So now we’re back to our super standard navigation, nothing sexy going on whatsoever. navigation, nothing sexy going on whatsoever. We have home about services, reviews, blogs, sign up and contact us. Okay, now in order to do this technique because you may not be using bricks, you might be using oxygen, you might be hand coding a menu, you might be using, God forbid, Elementor or Divi or something, okay, you’re still going to need to know how to approach this.
0:06:47
And in order to do this, you need to know how to inspect elements, okay. So we’re do this you need to know how to inspect elements. Okay so we’re gonna hit inspect and we’re gonna come in here into the inspector and what we are looking for is what are we going to target. And so you see that we have a nav right here so that’s the navigation. Now if you’re using a BS builder as I call it it may not have wrapped your navigation in a nav tag. Who knows what it would have done. And then it may not be lists right it needs to be an unordered list with And then it may not be lists, right? It needs to be an unordered list with list items. Hopefully that’s the case.
0:07:18
But what I need to do is I need to find, okay, I’m gonna select the direct child of the nav, which is a UL, so the direct UL of the nav. Because sometimes there’s nested lists in here and you only wanna deal with the top level thing. So we’re gonna be selecting what are called direct children, okay? So we want the direct child unordered list. children. Okay, so we want the direct child unordered list and then we want the direct list item under that which will only select these top-level list items and what we need to be able to select in our case is the last one or the last two.
0:07:52
So I’m going to show you exactly how to do this. Just to make things super easy let’s customize again our menu. Sorry I shouldn’t have added that second item because it’s going to over complicate things a little bit. I’m going to remove Oh, sorry, I shouldn’t have added that second item because it’s gonna overcomplicate things a little bit. I’m gonna remove it. We will add it, don’t worry, we will add it, but to get started with this technique, we wanna keep things as simple as possible. So what I need to do is I need to isolate this signup link from the rest of the menu.
0:08:19
I need to be able to style it different. I need to be able to send it away from the rest of the menu. I need to do a few different things here, okay? All right, so let’s take step by step. the rest of the menu, I need to do a few different things here. Okay. All right. So let’s take step by step. Can I just isolate that last menu item? Now I’m going to show you actually two different ways that you can approach this. There’s the default way of just make it the last link and attack the last link, or there is identify a specific link, maybe using something like a class. And so if I go in here and I click on sign up, you’re going to come down and see, I really have here and I click on sign up, you’re going to come down and see I really have no other options here which is not good at all. What I need to do is go back into WordPress. I’m going to go to appearance and I’m going to go to menus and then I’m going to look in here and see sign up and look again. No additional fields, nothing I can do here. What you want to do is you want to click on screen options up top and then you want to click on CSS classes right here and when on CSS classes right here.
0:09:14
And when you activate that, it’s gonna give you a block where you can add a class to a specific link. Now I’m gonna show you both techniques, both ways to do this, okay? So if you don’t wanna use CSS classes here, you don’t have to. But I’m gonna call this the CTA. All right, so we’re gonna go ahead and hit save. And then we are going to save here.
0:09:38
And then we’re gonna view this on the front end. we are going to save here and then we’re going to view this on the front end. And then I’m going to right click and inspect this and we’re just going to see, did this in fact get a class of CTA? And you can see it right there in the class list of the classes attached to this li element right here. That will allow me to target that individual link with a class. However, I don’t have to do that. All right, I’m going to show you again, both ways to do it. However, I don’t have to do that.
0:10:01
I’m going to show you again, both ways to do it. All right, so what we’re going to do first is we are going to refresh the builder so I can see that link in the builder. There it is right there. All right, and what I’m going to do is I’m going to come over to the style CSS tab and I’m going to be adding CSS. Now you can do this in WP code box, you can do this in Divi, you could do this in Oxygen, you could, it doesn’t matter as long as you understand the technique, you’re going to be able to get this done.
0:10:25
In Bricks, you write the word root, you’re going to be able to get this done. In BRICS, you write the word root, which is a reference for the current element that you are working on. Now, I said I needed to target an unordered list, and I need to target the list items of that list, so I’m going to write UL and LI. However, I also used a very specific word, and that word was, or term, was direct child.
0:10:46
Direct child. Not all of the children, not any unordered list, not any list item. Not all of the children, not any unordered list, not any list item. No, I need to target the direct unordered list and then the direct list item inside of that because I don’t care about all the other children. All right? That sounds bad, but I’m gonna keep moving on.
0:11:07
So we are targeting the direct ULLI. Now watch this. Here is a very simple, if you are new to CSS or you struggle with CSS very simple. If you are new to CSS or your struggle with CSS or you’re not sure about your CSS, just stop in different places and do a quick eyeball check. Do a quick what I call a border check. Okay, so we go to border five pixels solid red and we can see, oh dear, I am not targeting anything. Why am I not targeting anything? So I go back and I look at my and I look at my inspection, I say I’m targeting the direct, here’s the nav menu, oh there are no direct ULs in this menu. There’s a nav element and then the UL is the direct child of that.
0:11:50
See how being able to inspect what’s going on is both necessary and very helpful for what you’re trying to accomplish? So what I’m going to do is say I want to select the direct nav element and the direct nav element and then the direct ul and the direct li and now look at this i am able to target all of my li’s all right now do i want all of my li’s no of course i don’t want all of my li’s i want the last one and there’s many different ways to get the last one but by far the easiest way to get the last one is to simply write a colon and then write last child and say hey and then write last child and say, hey, Doug, I want the last child. That’s what I want, okay? And so I hit save and we go to the front end and you’re gonna see right there, I’m doing my border check.
0:12:35
This is my border check. Am I targeting the right things? Before I get too far in to what I’m trying to do and get ahead of myself and then realize, oh, none of the stuff I’m doing is even working, you just wanna do some quick border checks and make sure that you are targeting the right things. Now I know I’m targeting the right thing, but I also see because I’ve added this border, are targeting the right things.
0:12:50
Now I know I’m targeting the right thing, but I also see because I’ve added this border, that there’s some weird alignment issue going on here. Notice that these items are like higher up. This is all like top aligned inside of that container. And so what I can do is I can go back in and say, well, is that coming from the UL? Like is the, oh look, the unordered list is set to display flex. So what I can do is if I target the unordered list, flex. So what I can do is if I target the unordered list I can align all those items down to the center. So I’m gonna do that as well that’s another fix. This may not be required on the menu that you’re working on it could already be set like this. The point is I’m showing you how to inspect, how to figure out what’s going on, how to address any issues that may come up. So what I want to do is target the direct nav and the direct UL and then this is going to allow me to align is target the direct nav and the direct ul and then this is going to allow me to align items and you can watch them over there they jumped down to the middle of their container so i’m going to go ahead and hit save and i’m going to refresh this let’s check out what we’ve got going on on the front end now we are in business okay so instead of this five pixel solid red what i want is an actual thing that looks like a button so what i’m going to do is i’m going to do button an actual thing that looks like a button.
0:14:02
So what I’m gonna do is I’m gonna do button type things. Like for example, I’m gonna add a background color. Now, you can use whatever colors you want. You can use hex codes, you can write lilac. If you want to, I don’t even think that’s a real color. What are real colors? Well, of course, like fire engine red, you know, like that. There’s a lot of fancy CSS colors, I never use them. But I’m gonna be using my variables from automatic CSS. So I’m gonna do something like var action I’m going to be using my variables from automatic CSS.
0:14:27
So I’m going to do something like var action, and it’s going to give me my website’s action color back there. Then I am going to do padding, and I’m going to do 0.75m, 1.5m. And what I like to do on buttons is set the line height to one. You don’t really need a lot of line height going on inside your buttons. You might want a little border radius.
0:14:48
All of this is up to you, 100%. All of this is up to you 100% so I’m gonna do like 0.25 M. Now let’s do 0.5 M. Now 0.35 M. You can really dial these in the way that you want. Now if you’re an automatic CSS user do not be doing this. Don’t just be throwing random values in here. We have variables for all of your button styling. So your button padding can be referenced. The button line height can be referenced.
0:15:10
The button border radius can be referenced. You should be using variables for all these things. But that’s not in this tutorial. You should be using variables for all these things, but that’s not in this tutorial. That’s beyond this tutorial. Go watch the automatic CSS channel for all of that jazz. All right. What I want basically is a button right here. Now, I want the color to be Action Ultra Dark, and then I want the font weight to be 600. So we get a really good-looking button here. Font weight 600. Maybe I have to override that. I don’t know what’s going on with that. 600 maybe I have to override that I don’t know what’s going on with that oh I see you know what what we’re gonna have to do probably is target the a inside of that the link inside of that so I’m gonna grab this and I’m gonna say target the actual link in there please the font weight there is 600 see you just gotta you know things don’t go so well and you’ve got a you know kind of just recheck what’s going on what how can we probably fix this and you can get You’ve got to, you know, kind of just recheck what’s going on.
0:16:03
What, how can we probably fix this? And you can get to your solution. Now look what we’ve got going on now. What if I wanted to separate this from the rest of my menu? Well, there’s many ways that you can do that. Here we are with this last child and we can say, you know what? The margin left is going to be 3M, something like that. Maybe I’ll make it more prominent. I’ll do, excuse me, I’ll do 8M. I’ll do excuse me, I’ll do 8M.
0:16:28
And look, it’s starting to move away, but I really wouldn’t recommend something like that. If you wanted the menu to kind of be centered or maybe even aligned over here with the logo and then the button way off to the right, all of these things can be achieved. You just have to understand where your menu is, where it’s contained, how it’s contained, your menu is, where it’s contained, how it’s contained, its size, and so on and so forth.
0:16:54
So for example, with this menu, notice it stops right here. It stops where the green ends. Well, why does it do that? It does it because my menu is not 100% width. Like if I went here and set it to 100% width, now look what happens. It goes all the way over to where the gap between the logo ends, all right? So here’s a logo, there’s a gap right here ends. All right, so here’s a logo. There’s a gap right here caused by Flexbox gap. And then this is where the menu is allowed to stretch to when it is with 100%. You’re also going to see that there’s a an odd or really odd like margin on the left of this first item. That’s not good. We probably want to get rid of that. And then now, oh no, when we did 100% with the signup button came with the rest of the menu. My gosh, how do we fix button came with the rest of the menu my gosh how do we fix all of this it seems like we have created a nightmare and we should just go back to the way that it was and just be okay we’re just gonna have a standard menu no no no continue on my friends continue investigating continue inspecting continue to solve problems so what I’m gonna do is I’m gonna go back to the CSS tab down here guess what first thing I want to do I want to target this first element first Guess what first thing I want to do. I want to target this first element first element Well, how do we target the first element if you target the last element with last child?
0:18:09
Wouldn’t it make sense that you can target the first element with the first child now? I don’t know should we do a Border check five pixel solid red. Hey look at that. We are in fact targeting that first element Let’s try a little margin left of zero. And now we fixed that gap that no longer needs to be there. All right, we’re going to go ahead and hit save. We will check out what we’ve got on the front end. Perfect. So now what we want to do is we actually want to send our button all the way over here. There are many different ways to achieve this. But what I will say is let’s just keep going on what we were doing.
0:18:49
Here’s our button targeting right here. going on what we were doing. Here’s our button targeting right here. And guys, you can leave little notes for yourself in the CSS. Say, target the last item right here. Target, and I can even say target and style the last item. So I put what’s called a CSS comment in here. And when I come back in three months, I’ll know exactly which one of these little code blocks is doing, you know, the work that I’m looking for, right? So, right now I have the margin left at 8M. I actually So, right now I have the margin left at 8M. I actually want the margin left at auto. Look what that does. Auto shoves the thing all the way across from the side of the auto margin.
0:19:26
Now I’ll give you a little extra bonus here, alright. We got to go kind of into the future of CSS. Margin left is so old school, my friends. Do not be using that. We do not. We do not want to be using. We do not want to be using we do not want to be using margin left anymore the appropriate Semantic semantically correct. Okay. These are called logical properties CSS logical properties is margin inline start I’m gonna do a whole video on CSS logical properties But to give you a crash course inline goes across the x-axis and block goes top to bottom and so margin inline goes top to bottom. And so margin inline start is the start of the inline.
0:20:06
That’s on the left side. Margin inline end would be on the right side of the inline axis. And then you have block start, you have block end. If you want the padding on both sides, you can just do margin inline. I’m going to do a whole video on that, so don’t worry about it. But margin left of auto or margin inline start of auto are both exactly the same. And we’re going to go ahead and look at this. are both exactly the same. And we’re going to go ahead and look at this. We have one menu behaving like two separate things, but semantically when somebody keyboard navigates through, they’re going to be able to select all of these items. Now, you are going to notice a big, big, big problem here, and this might stop you from doing this technique. Okay?
0:20:47
Nevermind the fact that this menu item went down here. We don’t need to worry about that for right now. the fact that this menu item went down here. We don’t need to worry about that for right now. I’m going to click on this and we’re just going to take a look at what the actual problem is. Oh my gosh, this is not desirable. We have that button on desktop which is exactly the way that we want it to be, but it looks like that in the mobile menu too and that ain’t what we were looking for. That’s not sexy whatsoever. This is a trash can right here, a dumpster fire as they say. dumpster fire as they say. So what we need to do is, hey, let’s apply those styles, but not if it’s the mobile menu, that might be a better approach.
0:21:20
So I’m going to go ahead and hit inspect here. And you’re going to see that there’s this thing called the Bricks mobile menu wrapper or Bricks. Yeah. Bricks mobile menu wrapper would probably be, there it is. That’s the nav class. So the nav is called Bricks mobile menu wrapper. Why am I showing you the inspection of all of this? Bricks Mobile Menu Wrapper. Why am I showing you the inspection of all of this? Because you may be using Oxygen, you may be using, God forbid, one of the terrible builders, okay, that we shouldn’t name. You might be using Quikly, you might be using Gutenberg, you might be hand coding your own menu, said this time and time again. You got to be able to figure out this, what’s going on for your specific situation, which requires a little bit of inspection and understanding. Here’s the nav, it has the class of Bricks Mobile Menu Wrapper. So understanding. Here’s the nav, it has the class Bricks Mobile Menu Wrapper. So in your mind what are we going to do with this pop quiz? What are we going to do with this information? What can we do with this little situation right here?
0:22:13
Check out that nav instruction. I want to target the direct nav of this element but not if it’s the Bricks Mobile Menu Wrapper. Not if it’s the Bricks Mobile if it’s the Bricks mobile menu wrapper. I’m stressing the word not. If it’s not the Bricks mobile, why am I stressing that word? Because in CSS you can literally type the word not. Okay, so you can just say, hey, I wanna do this one, but not if it’s this. All right, and so what we can say is Bricks mobile menu wrapper.
0:22:44
I think that’s what it was called. I don’t know, off the top of my head. So I’m gonna go ahead and hit save, and then we’re gonna go back to the front end. We’re gonna check this out. it save and then we’re going to go back to the front end. We’re going to check this out. Hey, look at that. My friends, we have a signup link that is unstyle. Well, it’s not unstyle. It’s sound like all of the other mobile menu links. It doesn’t have any of that button nonsense going on though, but watch the magic. I’m going to close that. Watch the magic. Hey, on desktop, it’s actually a button. Isn’t that super clean?
0:23:13
Like it’s way easier than trying to say, Oh, clean. It’s way easier than trying to say, oh well we need to hide our signup button on this breakpoint and then what we need to actually do is add that element to the menu, but only if it’s the breakpoint then we’re going to show it. All that conditional logic stuff goes out the window. We’re using very simple CSS. We’re making sure that our menu is semantically correct and intact, that all of the menu items, including this signup button the menu items, including this sign up button over here, are in the same menu, both on desktop and on mobile. And they still look exactly the way that we want them to look in each case. I mean, this is absolutely fantastic. Now let’s say, cause last child is a little problematic here. Let me, let me show you why last child. I mean, you could probably already guess, right?
0:24:00
But I’m going to go to customize. I’m going to go to menus. I’m going to go to menu. I’m going to add something else. But I’m going to go to customize, I’m going to go to menus, I’m going to go to menu, I’m going to add something else. And this might be like contact us. Okay, oh, I don’t I don’t need to do it there. I need to do it here. All right, contact us, get rid of the dollar sign, publish. And oh, dear. Now our signup is here.
0:24:19
And now our contact us is way over there. So you can obviously fix this by swapping their position. Now the contact us is here and the signup is way over there. by swapping their position. Now the contact us is here and the sign up is way over there but there could be safer ways to do this. Namely, we could give the sign up link a unique identifier and this could actually be like header CTA, something like that. I’m gonna go ahead and save menu here and then instead of just doing all of this like direct child targeting like this, I can just say, hey, inside of the nav when it’s not the Bricks mobile menu, I can just say, hey, inside of the nav when it’s not the Bricks mobile menu, I want you to target the header CTA.
0:24:56
And I’m going to go ahead and hit save. I don’t think it’s going to work in the builder right now because, there we go. I had to refresh the builder because the builder didn’t realize that class name had changed. And then I’m going to go here, refresh the front end so you can see it’s working on the front end as well. I’m going to go down to mobile so that you can see it still is not styled in the mobile still is not styled in the mobile menu because it’s still happening within the same instruction of, let me get to the CSS, style CSS, of this not statement right there.
0:25:26
So I’m targeting the nav, except not when it’s Bricks mobile menu wrapper, and then I’m targeting the header CTA. Do I need to target the direct header CTA? No, number one, because it’s not direct, and number two, because there’s only one of them. No, number one because it’s not direct and number two because there’s only one of them and so we’re just targeting that specifically Now it’ll still cause problems if you put things in the wrong order But what I’m gonna do is I’m gonna add a contact link for you So let’s go ahead and add a custom link and we’re gonna say man. I love that dollar sign today, don’t I?
0:25:57
I love dollar signs in general. Don’t get me wrong friends. Let’s hit save menu Let’s hit save menu, let’s go back and refresh. And you might end up with something like that. Now notice that my signup link is still stopped. I mean, maybe you want this. Maybe this is a somewhat desirable in certain cases. Now I do need to fix the font weight issue that’s going on. So we need to put the font weight here again. All right, so font weight 600. And then we need to take off this last child A, all of that, okay?
0:26:24
And then we need to take off this last child A, all of that, okay? Actually, it’s gonna make me do header CTA. This can be A class, let’s see, header CTA A, okay? That’s not gonna work. So we do need still an instruction of this with an A attached. The A is basically you’re targeting the actual link, which happens to be inside of header CTA. basically you’re targeting the actual link, which happens to be inside of header CTA. And this is what needs to get the font weight. There you go. 600 save.
0:26:57
Now we go back to the front end. Sorry, I did that a little quick. So you might’ve got a little lost there. Let me go ahead and just back up a second and tell you exactly what I did. The font weight will normally apply to text when you add it to a container. However, there’s definitely something overriding and this is a brick situation, not necessarily going to happen anywhere else. overriding and this is a brick situation not necessarily going to happen anywhere else but the font weight wasn’t working when it’s on this container because header CTA is a container if we look at this and inspect it I don’t want to lose anybody who’s there’s an LI the LI has header CTA the A is inside of the LI right so in order to apply the font weight correctly we have to target that font weight correctly, we have to target that A specifically.
0:27:40
So we use the same instructions that we use to target header CTA, and we just tack on the A to target the actual link that’s inside. Then we can change the font weight there. I can remove that font weight instruction, and we are all good to go. And now we’re in a situation where my button retains the 600 font weight, but another link that is the Latin, now the new last child does not have the font weight. the new last child does not have the font weight. All right, now, what if you want both of them? Well, watch this. Contact us and we can say this is the header CTA.
0:28:13
I can give that the same class. Now let’s refresh. Does cause a little bit of a problem here, doesn’t it? So what I would recommend is probably do something like header CTA2, and then we’ll go like that. CTA2 and then we’ll go like that and then I can style header CTA2 and maybe you want this to be a gray button or something. Then we get into the territory of you don’t want to repeat yourself and your button instructions. You should be using variables, maybe even locally scoped variables. I’ve covered this in other videos.
0:28:42
It’s a little bit beyond what I’m showing you here. I’m showing you how to style links, separate them from a main menu, but keep them in the same menu, not have your mobile menu interrupted by what you’re doing with these techniques. menu but keep them in the same menu not have your mobile menu interrupted by what you’re doing with these techniques okay so I think we’ve pretty much gotten where we want to be now I will show you one more little technique if you want to retain you don’t want to use classes you’re like no I just want to do the last child thing okay watch this because if there’s two things you want to isolate then I’m going to show you one extra trick all right so we’re going to Then I’m going to show you one extra trick.
0:29:13
All right. So we’re going to do a direct UL and we’re going to do a direct LI and then I want the last child, right? That was our instruction. And then I’m going to target here the same exact thing except I’m going to target the A and I get my font weight back. Okay. Now save, refresh this.
0:29:31
And I want to see our second element over there. Let’s see. Refresh, contact us. All right. Contact us is now the new thing. Refresh, contact us. All right, contact us is now the new thing. All right, what we need to do is we need to change our order. All right, let me get out of here. Let’s go to menus, menu, and contact us, sign up, flip-flop those, publish, and refresh in the builder.
0:29:55
There we go. Now, I want to bring the contact us over there as well. The contact us is not the last child. So we’re going to go down here. Well, the contact us is not the last child. So we’re gonna go down here, we’re gonna go to our CSS. Here is our targeting the last child, and here’s our targeting the last child of A. So what I’m actually gonna do is I’m going to steal this right here, I’m gonna come down, I’m gonna open and close my brackets, and then I’m gonna change this in two ways.
0:30:24
So there’s last child, and then there’s counting children, ways. So there’s last child and then there’s counting children or counting last children. If you’re familiar with inf child this is exactly how we’re going to do it but we’re going to do it backwards using inf last child. Okay? If you’re not familiar with inf last child it’s literally inf child which counts from the beginning to the end. Inf last child counts from the end to the beginning. Okay? So we’re going to do inf that’s n-t-h last child and then in Okay, so we’re gonna do inf, that’s N-T-H, last child, and then in parentheses, I can say to, and that’s gonna select the second to last child.
0:30:58
How do we know, fam, fam, how do we know that we’ve actually selected the second to last child? Well, you do your border check. Border, five pixel solid, red. There you go. I can see that I have properly selected my element. So now what I’m gonna do is I’m gonna move it away from everything else. So now what I’m gonna do is I’m gonna move it away from everything else I want it to be over there with that button okay, so I’m gonna do margin inline start auto and Look at that. Oh, no. We have a problem my gosh now This is actually a problem where if you went to inspect and try to figure out what’s going on I mean well right off in your head. What what could be causing this problem a lot of people might think hey It’s a flexbox issue hey, it’s a flex box issue.
0:31:38
Maybe it’s using space between and so it’s spacing the items out. But no, that can’t be happening because these items would be spaced between as well. Ah, there’s no margins. There’s no gaps. Like what’s going on? And inspecting is really probably not going to answer this question for you. What you have to realize in this situation is you’ve kind of created two competing instructions here. two competing instructions here. Both of these elements are basically margin inline start auto, which is, hey, get away from everything that’s to the left of me.
0:32:08
Just get as far away as I can from all that stuff over there. So this link right here, contact us, is getting as far away as it can from the end of the menu here. But the signup is also trying to get away from the contact us button. And the way CSS interprets this is it says, well, I’ll just put contact us halfway between that button and this menu. interprets this is it says, well, I’ll just put contact us halfway between that button and this menu. And then there, there, that’s what you wanted, right? It’s actually not. So what we want is that now the last child doesn’t need margin inline start auto. We can remove that.
0:32:40
Only the nth child, the second to last child has margin inline auto. And by the way, the way that this works is if you select the second item, anything after that will go with it. If you select the second item, anything after that will go with it. It’ll get pushed, right? If I selected the third item, watch this. The third one, now three of them go. Watch, now I do four and four of them go. All right? So that’s kind of how that works. So if you know you’re going to have two isolated elements, then just put the margin inline start auto on the second to last one and it’ll take them both over there.
0:33:11
All right, so I’m going to go ahead and hit save. I’m going to go refresh on the front end. Check that out. So I’m going to go ahead and hit save. I’m going to go refresh on the front end, check that out. And then we’re going to do a mobile check real quick. So I’m going to come in here. We go look at this. They look exactly the way they’re supposed to look. Look, these two elements aren’t way down here at the bottom. Why? Well, nothing can possibly happen to the mobile menu because all the shenanigans that we’re doing are contained to the desktop menu because we’re saying, the desktop menu because we’re saying, hey, not the mobile menu.
0:33:40
Do all these things not in the mobile menu. All right. So it’s very, very safe. And like I said, you should be using variables for these things. If you really want to up your game, you can style this contact us link any way that you want under this L, this in flash child to instruction. You can put a custom class on that. Like we talked about earlier, there’s many ways to skin a cat.
0:34:02
What you should not do is have about earlier. There’s many ways to skin a cat. What you should not do is have a menu that’s missing items and then have those missing items as separate buttons outside the menu and then hide those buttons on a mobile breakpoint and then dynamically try to add the elements back into the menu on mobile. That all is nonsense. Don’t do any of that stuff. Don’t make that mistake. You want one menu, one navigation, and now this is more accessible. Okay, so if you care about One navigation and now this is more accessible. Okay, so if you care about accessibility, if you care about semantic HTML, this is better objectively.
0:34:35
And I think it’s just a cleaner, much, much, much cleaner implementation. So stop making that mistake of buttons outside of your menu. My gosh, just take the items you want to be buttons, learn how to separate them, learn how to turn them into buttons, learn how to put them where you want. You can even put those in the beginning if you wanted to. of buttons, learn how to put them where you want. You can even put those in the beginning if you wanted to.
0:34:52
You can set them right next to the logo if you wanted to and everything else could be way off to the other side. That’s absolutely doable. Should I do that? Maybe we’ll do that in a different video. I don’t know. Uh, that’s it. That’s it for this video. Drop a comment, drop a like. If you found value in this, I love you guys. I’ll be back very soon. Helping you up your dev game. Cheers.
