How to Create a Dynamic Centered Logo Menu in Bricks (w/ SCSS)

0:00:00
What’s up everybody welcome back to the channel really excited about today’s training because we’re gonna kill two birds with one stone here two things that people have been asking me for over the past month or two on this channel number one Kevin how do you create a header with a centered logo it is quite a challenge we’re gonna tackle that challenge today in bricks number two Kevin we need more sass on this channel more s c s s we are gonna use sass along some other clever techniques. Today to help us accomplish this centered logo menu header thing okay now this is a little bit more of an advanced tutorial however however if you are a beginner if you are new to this stuff do not run away right now do not leave this channel do not leave this video I really want to encourage you regardless of your skill level to follow along with this training because while we are gonna do some tricks we’re gonna get into our bag okay and it is gonna be a little bit more fun. It is not a long tutorial it is not a difficult tutorial so you’re gonna be able to do this you’re gonna learn some really important fundamentals of both sass and just building a header okay and it’s gonna be fantastic you’re not gonna get lost I promise I’m gonna go slow I’m gonna explain everything that I’m doing we’re gonna get through this all right we’re gonna do it together so let’s go ahead and jump in. All right so what I’m gonna do inside a bricks you can do this in oxygen if you’re an oxygen as well it’s gonna work exactly the same all the magic happens on the sass side of things for the most part so very very similar bricks and oxygen you can follow along doesn’t matter what builder you have in bricks I’m gonna go to templates and I’m going to add a new header we’re gonna call this header centered okay yeah it’s centered logo whatever the name doesn’t really matter don’t get hung up on those little details alright edit in bricks we’re gonna open up the editor the next thing I’m gonna do by the way I’m gonna say that this is I’m just gonna say this is a section we’re not going well no I can’t do that I can’t do that excuse me let’s go backwards we are going to say header I could already have another header on this training site in fact let’s just delete the other header we’re off to a great start aren’t we all right let me go trash this header centered edit with bricks now we should be good to go all right the next thing I’m gonna do is open WP code box now if you don’t have WP code box or you don’t have a code editor that allows you to write in sass let me delete all this nonsense then you’re not gonna be able to follow along this tutorial you can write code in bricks you can write CSS in bricks you can write CSS in oxygen I get it it’s not the best experience okay much more powerful and organized experience is using an external code editor like WP code box so again link down below to WP code box as well as a link to my video on why you should be using something like WP code box for writing your CSS and of course in this situation sass or in almost all situations sass okay anyway let’s move on so I’m gonna have this open this is our canvas for writing our sass if you’ve watched my video on WP code box you know that when I write stuff here it automatically shows up here we don’t have to do refreshes and all this other stuff so it is really a seamless experience I’ve got two monitors now so I can actually have my sass open on one monitor and my and bricks open on the other monitor and I don’t even have to switch back and forth between tabs but because I’m screen recording I am going to do the little tab thing here all right so the first thing I want to do is add a section to this header but I don’t really want it to be a momentically it’s not a section it just needs to be a div so what I’m going to do is I’m going to add or I’m going to change the tag from section to div right there and you’re going to notice that all the padding goes away and I’m just left with two containers my outer container okay with this call that outer and then this is inner right very very very simple and I’m just doing this for education purposes I don’t usually name them this but it’s going to help for this tutorial okay so the next thing we know we know we need is a header or I’m sorry a menu we already have our header we need a menu because that’s what this whole thing is based on so I’m going to go in my inner right here I’m going to add a menu element a nav menu and you’re going to see there that the first link shows up we have no other padding or anything else on this now on my outer I’m going to go to style and I’m going to go to layout and I’m going to put some padding on this header for my left and right padding I’m going to do let’s say five in all right so we got five in a padding and I’m going to do three in of padding on our top and bottom and that’s going to give us something like this you can see visually all of my padding okay I’m going to go ahead and save our work as we go all right so I’ve got my outer which has my header padding in it and I’ve got my inner that’s also housing my nav menu so I’m going to go ahead and put a class on this menu we’re going to call this menu centered let’s just do menu we’ll do menu double dash centered okay so we’re adding a class for later all right this is for styling for later so that we can easily target this menu all right so the next thing I’m going to do is I’m going to see why I only have a home link showing up okay and you can edit menus and WordPress two different ways you can go to the customize or panel and go to the menus section or you can go to the back end and go to the menu section back there doesn’t really matter you can do it either way all right what I’m going to do is add some because you can see we only have a home page and I actually don’t want a home link in our in our menu so I’m just going to add some custom links here we’re going to pretend that these pages exist so this is going to be about us I’m going to do services and then I’m going to do let’s say portfolio and then I’m going to do contact us we’re just going to start with four links now one thing about the centered logo menus is that you there are some limitations one of the limitations is you have to have an even number of links because you have your logo in the center you don’t want three links on one side and one link on the other side or even really three and two in order to have it really clean and balanced you want two and two or one and one or three and three or four and four and then of course there is another limitation that the centered logo menus don’t really look good on mobile so on mobile we have to get rid of the centering effect and we have to go back to a traditional menu and how many links are in your head are kind of determined where that break is needing to be in most cases so you’re either going to have one one two and two three and three four and four that would be eight links total you’re not really going to go beyond that for most use cases so those are the use cases that we’re going to cover in this training I’m going to show you a really clever way that I’ve come up with to cover that to cover all those bases and you’re going to see a lot of the sass that we’re going to write the reason we’re using sass is because we want this to be easily scalable, maintainable there are some other problems with the centered header logos that we’ll talk about and sass fixes these for us kind of all right so at least now I have some other links so what I’m going to do is we’ll save our work we’ll refresh the builder and hopefully I should see these links I do now I see them that’s perfect okay so the other thing I know I need in my header with my centered logo is a logo right so what I’m going to do is in my inner along with my nav is I’m going to add and actually in bricks you can just add a logo element you don’t even have to add an image element you can just straight up add a logo all right so I’m going to select a logo let’s do the automatic CSS logo all right so we’ll put that in there and we are going to give this a width however in order to do this technique I really need to be able to reference or know the width of the logo at all times but I’m going to start out just super basic we’re going to get a little bit more advanced and a little bit more clever as we go so what I’m going to do is for my width I’m going to do something like 12 rim maybe well let’s do 16 rim that looks that looks a little bit better okay I also want my logo to come first okay perfect so I’ve got my logo and I’ve got my nav menu now what we want to do obviously the logo needs to be centered right in our header so I’m just going to take care of centering the logo in our header that’s like the first thing I’m going to do all right and we also want to give our header and our inner some classes just so we can stay nice and organized so I’m going to call this header and then I’m going to call this header inner so it’s going to be header double underscore inner and then we’ve got our header logo just like that so our header logo and then I’ve got my menu centered okay so that’s perfectly fine all right so now what I’m going to do is on my header logo class we’re going to take care of centering this logo in the context of the entire header so what I’m going to do is style we’re going to go to layout and we’re going to position this absolute and then for now I’m going to go top 0 and left 0 just for now now to make sure that this is actually connected or attached to my header you probably know absolutely positioned elements need a relative parent to attach themselves to so that they don’t attach themselves to the browser window all right so what we’re going to do is on my outer right here really my header my header class I’m going to go down and put position relative on this header you’re not really going to see a change but technically my logo is now attached to my header all right because I set my header to position relative and my logo to position absolute okay so that’s how those two things are interacting with each other next thing I’m going to do notice it’s not centered is I’m going to handle centering it both horizontally and vertically and because it’s an absolutely positioned element this is a little bit more technical okay so we can’t just use like flexbox and center the item with flexbox we have to use a there’s a couple different ways to do this the technique that I usually go to my go to technique is with translate and just left and top positioning okay so under absolute you’re going to see that you have top right bottom and left positioning so for top I’m going to do 50% and for left I’m going to do 50% the problem is that doesn’t actually get you halfway to the bottom and halfway to the right you would think it would but it actually doesn’t so the rest of the technique the second half of this technique is a translate so under transform which we’re going to go to down here transform I’m going to open this up you can translate it on the x and y axis so all you do remember we went 50% down and 50% over we’re going to go x minus 50% and y minus 50% and that’s going to put us in the perfect center okay so translate x minus 50 translate y minus 50 you can see now that my logo is perfectly in the center of this header so that’s fantastic that’s exactly what we want since my inner is automatically centered and my menu is centered vertically it’s already perfectly centered vertically with this logo the problem is it’s not horizontally centered okay so what I’m going to do is on my inner now I’m going to basically tell this inner to center the this menu horizontally okay across the x axis so the way I’m going to do that is with this little button right here align cross axis to the center in oxygen this is one area that would be different in oxygen this this layout in bricks is different from the layout in oxygen but the technique the technique is the same we’re using flexbox to center the menu vertically or I’m sorry horizontally inside of this container so I’m going to go ahead and save there we’re going to look at what we’ve got on the front end and you can see the makings of what we’re trying to achieve we do have our logo centered we do have our menu centered but what we need now is a gap between the second item and the third item it is equal to the width of the logo plus some extra well that that’s already getting a little a little tricky okay so let’s see what most people would do most people would say I need margin on the right of my second item and margin on the left of my third item and they would probably just choose random values that seem to work okay so that’s what we’re going to start out by doing all right so remember this is called menu centered my dog is going absolutely nuts because the kids just got home from school so I don’t know hopefully the mic doesn’t really pick all that up all right so I’m going to do menu centered we’re targeting our menu centered right but we’re not just targeting the entire menu what do we need to target we need to target the links that are inside the menu more specifically we need to target the L.I. elements so if you look at how a menu is structured a proper menu you’ve got an unordered list and then each link is a list item or really wrapped in a list item but if we just space out our list items we’ll be good to go right so we want to target the UL and the L.I. that are inside of my menu so what I’m going to do is menu centered and then in SAS you have access to nesting so what I’m going to do is just open the brackets and then if I target my UL.I. inside of my menu centered it’s going to target this just like normal okay but it helps you keep everything nice and organized so just to show you this what I’m going to do is do background color of red and we’re just going to see if we get our targeting properly and you can see that we do have our targeting properly so all of our L.I.s now have a background color of red of course we don’t want that to happen we want something else to happen well the first thing that we want is we want to take off and let me see if this on every L.I. it is so bricks and this is kind of where builders get in the way a little bit we’ve got to kind of work backwards to solve a problem that was presented to us that problem is that bricks puts an auto left margin on these links on these L.I.s and we don’t want that we don’t want any margin or anything else going on on our links so what I’m going to do is on the UL.I. I’m just going to do a margin left of zero and I don’t know if that’s actually going to work because we may need to important that we do and this is the problem with with builders trying to do too much is you have to override things and then we’re getting into a situation where because of the order that the CSS appears in in the style sheets I have to use important to actually override that and get rid of it I wish I didn’t have to do that but nevertheless I do so now what we want to do we’ve got a nice clean slate here for our menu centered our UL so now we’re going to target our UL so just the list itself not the list items just the entire list itself which is effectively another container a UL it’s just another container with a semantic tag of UL.

0:16:34
okay so in this what we want to do is add a gap between our links so I think a gap is a better way to handle the spacing between these links so now that I have a gap of two in you can see the links are now spaced out evenly but we got rid of the initial problem which was that first link had padding on the left when there’s nothing there to space it out from right so it actually would off center our links and we don’t want that happening the gap is a flexbox technique which is intelligent enough to know to put the spacing between items but don’t put any spacing on the end and don’t put any spacing on the beginning because none is needed there so the gap gets us our space in between the items obviously though that gap is not big enough right to fit our logo and if we just did a big enough gap to fit our logo like something like this we get this and you see it’s still not enough and then we have a ridiculous amount of space between our links we don’t want to do any of that okay we’ve got to get more intelligent more cunning more sly okay and how we approach this so what we want to do is we actually want to target our second link and our third link and we want to just apply some spacing some extra spacing to those things all right so what I’m going to do is we’re going to go in here and we are going to target once again I can actually come down here to do this the ULLI but we’re going to target something called Inf Child and if we target the second child so Inf Child 2 we can do something to it like for example I’ll do background color red again and you can see I told you guys I was going to go slow explain everything I want the beginners to be able to keep up I want you to learn these techniques I want you to understand the exact workings of them and why we’re doing things the way that we’re doing so just bear with me if this is too beginner for you hit the fast forward button right you’ve got you’ve got control of the player all right people can’t get information out of me that I don’t share so if I’m sharing too much you fast forward I’m going to go slow for the beginners that’s what I promise in the beginning all right so Inf Child 2 you can see that I targeted it right obviously the background is red now so this is how you target a certain number within a list or a certain number of things within any container all right so Inf Child 2 background color red but we don’t want the background color to be red what do we want we want margin on the right of it because if it had margin on the right it would push everything over to the left at least from here and here over so we’re just going to choose margin right like what I don’t know 5m let’s see what that does okay it’s getting us there how about 8m now keep in mind guys we are going to get more intelligent with this is not the right way to do this is not the way that I would recommend this is the way that most people would approach this so 10m gets you about where you want to be now if I did 10m on the left of this link as well it would create nice even spacing wouldn’t it you you agree so what we need to do is target the one two three the third child okay so what I’m going to do is create another rule right here and we’re going to target the third child except this margin left needs to be 10m except we already had to important ties a margin left up here so I’m going to have to do that is important again and I don’t like to have to do that okay but it is what it is because bricks bricks and oxygen does this too so it’s not just a knock on bricks oxygen does this to they try to do too much and they end up getting in the way a little bit so we just got to overcome that all right so I’ve got and obviously now 10m is looking a bit too much so let’s go like six and six save and go back now we’re exactly where we want to be so we’re almost there guys we have the centered logo and the problem is here’s the big problem this is not scalable this is not maintainable we’ve got random like what are called magic numbers this is a magic number nobody knows why that needs to be 6m it’s just it’s a number we found that happens to work but it’s not going to work if the logo gets bigger right so if I go in and made the logo bigger we would see that we or smaller even let’s just go and make the logo smaller so I’m going to grab the logo itself and we are going to go to style layouts where did we set the logo with I can’t remember did we even set I thought we set a width for the oh we set it at the ID level stupid stupid stupid okay we’re going to go to 16 rim here all right let’s say I made it smaller like 12 rim well now my gap is suddenly looking a little large all right it’s that’s a little awkward that kind of that kind of gap it’s not too bad it’s not awful you could get away with it but what if we made the the logo a lot bigger okay so let’s go back to logo with and let’s do like 22 I don’t know why you would ever want to do that but you know you get one of those clients make the logo bigger I’m not paying you right that kind of situation so you could see now that we don’t have enough space clearly the spacing is off so we need a more intelligent way to approach this what we need is a way for the code that we’re writing to know the width of the logo that would be really really helpful and it turns out that’s not super hard that’s not super difficult so what we’re going to do is in our sass here there’s two things we have to do you we’re going to create variables we’re going to create a variable for the width of the logo right so we’re going to do logo with just like this now in sass the way you write a variable is with a dollar sign so I am going to go over here and see what was the width that we actually needed okay let’s go to logo I think it was 12 rim now it was 14 16 I think it was 16 rim so 16 rim is what we wanted so I’m going to go into sass our logo width is going to be 16 rim we’re going to put it right here the problem is I can’t take this and insert it here okay I can use variables and bricks but not sass variables I have to use CSS variables so what we’re going to do is we’re going to make a usable CSS variable and the way that we do that is we define variables at the root level that means that we can use this variable anywhere on the website that we want to and you use a double dash to do this okay a double dash in the name of the variable which is going to be exactly the same logo width now the thing is we can’t put 16 rim right here because if we change this to 12 rim it ain’t going to change right here and we don’t want to have to be a dummy and change this in two different places that’s also not scalable also not maintainable okay that’s for chumps and we don’t want to be a chump we’ve talked about this in past videos so what we want to do is we want to reference this variable inside of this variable and so the way that we’re going to do that is I forget what this technique is called okay look I just know how it works you could look it up alright in fact maybe I’ll put it down below but what we want to do is we want to use a pound sign and then a dollar sign inside a brackets and then we can say logo width okay so now effectively what we’re doing is we’re grabbing the value of logo width and assigning it to the CSS variable that we can now use inside of the builder and what this effectively does I’m going to save that we’re going to go in here we’re going to replace 16 rim with var and then we’re going to do logo width right and we’re going to hit save okay perfect now that’s 12 rim right that’s why it looks smaller but watch this if I change this to 16 rim and I save it’s now 16 rim if I change this to 26 rim and I save it’s now 26 rim so I now have control over my logo through this variable which means my this if I want to change the width of the logo this never has to change I can change it all from right here okay and it’s automatically going to update the CSS variable that references it and all is well in the world and with this gives us is tremendous power and flexibility with our little problem that we were running into just a minute ago with what happens when the logo width changes so watch this our margin right what if our margin right was equal to the width of our logo so I’m going to do var and actually I don’t want to use the variable like I like I was doing in the builder because I’m in SAS and if I use SAS variables it actually gives us some extra superpowers okay so what I’m going to do is use the actual SAS variable of logo width and then I’m going to do the exact same thing right not the important right there and I’m going to hit oh I don’t want that extra little bracket okay or semicolon so now what I’m saying is hey make the margin right and the margin left equal to the width of the logo now what you’re going to see is that this makes the spacing way too much but what you’re going to notice is the spacing is now dynamic and that is very very important so now let’s say what if it was equal because if we took the logo width and cut it in half and put that half here that half here that might be really really accurate all right so what I’m going to do is I’m going to take and we’re just going to use in the cool thing about SAS you don’t have to use calcs you can literally just write the math formula right there okay so you don’t even need to put it in the calc so I’m going to save that we’re going to come over here and look at this we’re getting closer and closer and closer to what we wanted to achieve however I don’t want it to be exactly equal because this is almost like they’re touching okay so what I wanted is the logo width divided by two and then we’ll add maybe like one M of spacing to whatever that calculation happens to be I don’t really care what the calculation is I just know that I wanted to be half the logo plus an extra M of spacing and now let’s see what we get there now we’re starting to get hold on oh wait no I didn’t get it let’s see incompatible units M and RIM okay so basically this is RIM and it’s having trouble adding M’s to RIM’s so what we need to do is just use a one extra RIM of spacing and maybe that can be even like two RIM of spacing okay so now we go back we’re not getting an error in in code box anymore and now you can see that we are looking much much much better and the best thing about this is as the logo width changes now our padding is going to change or our spacing and everything is going to be right in the world automatically that logo is never going to encroach on our links all right now I’m going to go back and set this back to our 16 RIM that we started with now see we’re not done because here is another problem with using a header like this with the centered logo things are going to break if you add more links so what we need to think about let me just show you I guess we should demonstrate that so I’m going to customize this and I’m going to go to menu and I’m going to add some more items so we’re going to add like I’m going to do custom links here let’s do like free trial okay just we’re just going to add nonsense here and then I’m going to add another one we always definitely want to keep it even okay you don’t want to be adding odd links in any case so there’s going to be a couple even scenarios that we’re going to deal with here so the next thing I’m going to add is I don’t know test link something like that it doesn’t really matter so add here and then we’re going to publish and now you could see we are all out of whack so here’s why this is not scalable maintainable you can do this right but somebody’s going to add more items to the menu and they’re going to be like what the heck it’s all busted up and of course they can go find our code here but then they’re going to be like all right what’s going on here in child 2 and child 3 maybe they don’t know what in child is they don’t know what’s going it’s harder to cipher what’s going on right so obviously if I came in and said okay but really what we need is the first margin needs to go on the third item and then the next margin is going to fourth item so if I change this to 3 and I changed this to 4 then I save it’s going to fix itself okay but that in that that requires me to decipher what’s going on in the code and I don’t want to have to do that and there’s something called the 3 month rule the 3 month rule is if I leave this build for 3 months and come back and add more links to the header and I get to remember exactly how I worked out all of this code to make this thing happen properly and how long is it going to take for me to refigure it out in order to adjust it and make it work again that’s what I’m talking about when I talk about scalable and maintainable right so we’ve got to have a more cunning a more conniving a more slow way I don’t even know if those are the right terms but a smarter way and a more intelligent way to approach this to make it scalable make it future proof make it maintainable okay so what we’re going to do is we are going to get rid of our extra links first of all let’s just go back to where we were let’s back the train up back it up Terry back up back up here we’re going to delete this remove and remove and we’re going to publish okay and so we’re back to our 4 links and now what I’m going to do is switch our code back to and 3 and save and that’s going to get us now we’re back to that clean slate where we were so what I need now remember we we needed our code to know the width of the logo that was very important you saw why that was important now what we need our menu to know is how many links are there and there is a way to tell our code how many links are there because there’s only a certain amount of use cases like I said in the beginning there’s either 2 links there’s 4 links there’s 6 links or there’s 8 links there’s our scenarios right there never going to be more than 8 and there’s never going to be less than 2 okay and it’s always going to be even all right so what we need is a way to know our code how many links exist so that it can apply the right code all right so what we’re going to use is something called a data attribute don’t get scared off don’t run away on me okay I told you we’re going to go slow we’re going to walk through we’ve already learned some fantastic things you’re about to learn a little bit more all right so what we’re going to do is on our builder in our builder I’m going to select my menu because I need my menu to communicate how many items are here now this can’t happen dynamically okay but it’s it’s mostly dynamic let’s say so I’m going to go under style and I’m going to add a data attribute right here I’m going to hit the plus sign you could do this in oxygen just like you’re doing it in bricks here and I’m going to call this data and what do we want to call this we want to call it like data menu links let’s do data menu links now in data attributes best practice standard practice is you always use the word data so this can be whatever you want menu links you can call out whatever you want but always start with data dash something data dash something all right and then you’re good to go so I’m going to call this data menu links and the value is going to be the number of links which right now happens to be four yeah you agree with me okay all right so we’re going to save that and what I want to do is on the front end I’m going to show you what exactly happens in the code here so under this nav right here you’re going to see this was added to the code data menu links equals four so now this is literally printed in the HTML output and what’s great about this is we can actually target data attributes with CSS and SAS okay so instead of targeting menu centered and then doing all of these things I only want to target a menu that has a data attribute and then that data attributes obviously going to have a certain value yeah so the way that we target data attributes is we literally just write a bracket data menu links equals four and that’s it so if the if it has this data attribute and the data attribute has this value then these things are going to happen right here so I’m going to go ahead and hit save and then we’re going to go the front end and you’re going to notice that nothing has changed so why did we do it well now we actually have the foundation for creating a dynamic and scalable and maintainable menu okay so watch this if we copy this code right and I put another version of it down here but I change this value to six and I change this to three and this to four why am I doing that because when there’s six items I need to target the third item and I need to target the fourth item when there’s only four items like here you saw I need to target the second item with margin right the third item with margin left you’re getting it right you understand you following long when there’s six items you have to target the third item with margin right and the fourth item with margin left I already showed how that works okay so you should be with me still I know it’s a lot of numbers going on a lot of stuff happening but you should be with me if not rewind and then work your way back to the spot okay so we’ve got data menu links for data menu links six why is this critical because now watch this when I go add more things so I come along here I am let me get out of this here I am three months later I’m coming in customizing menus menu I’m going to add my additional links here so we’re going to go test link link add to menu and I’m going to go test link test link add to menu okay there we are publish you can see it’s all busted up it’s all fugly right but here we go I’m going to refresh the builder and now check this out I grow all I have to do is grab my menu watch this magic my friends style attributes menu links I got to tell the code how many links there are now before it was four now it’s six right and I had saved guys it’s already fixed itself we go look at this on the front end it’s already fixed itself now all we need is we need to account for the other scenarios so data menu links eight would be done now guys don’t do this okay I mean I mean do it like follow with me but don’t actually do it this way because this is not this is the chump way to do it all right it’s going to get even better we’re going to use more sass magic all right you’ve got to stick with me we’re going to use more sass magic watch this eight okay so I’ve got six I’ve got eight well guess what I need to target four and I need to target five right and that would make all of this work now and then what about up here what if there’s only two so I need two and I need to target one and I need to target two I think I think that’ll work all right let’s see so we’re going to go and let’s just remove our extra links here so I’m going to go to the menu we’re going to go actually no we’re going to add two more let’s add two more all right so we’re going to add item custom link and test link because we got to test our eight out right so test link and test link okay add to menu and then we’re going to come down here we’re going to change this to eight but we’re going to save and then we’re going to view this on the front end publish publish thank you okay out guys guys it’s magic it’s like magic it doesn’t get any well it does it does in fact get better than this all right that’s why I need you to stick around okay so our our logo now will be dynamic right so if the logo gets smaller the spacing gets smaller the logo gets bigger the spacing gets bigger and now it accounts for extra use cases I can fit up to eight links up here I can switch it down to six which we’ve already seen four which we’ve already seen let’s see if two works okay so I’m going to go into customize menus menu and we’re going to go to remove and we’re going to go to remove I really wish that they made this more efficient easier but instead they’re building Gutenberg bullshit remove publish okay so now with two what we need to do is we need to go in and test save we just change our data menu links to two bang bang bang done right okay so here’s the thing I said this way to do it is the way that chumps do it okay and here’s why if I have to go in and make adjustments now thankfully I’m using my logo with but look at I mean look at this formula what if I wanted to actually increase the spacing between the logo and the and the the link on either side right I would have to change this to like what three rim and then like a chump I would have to go and do it here and do it here and do it here okay so let’s fix that problem so what we’re going to go up here is we’re going to do logo spacing okay and we’re going to do this formula right and we can actually just importantize the whole thing that’s fine so we’re going to do this and logo spacing equals to that so I’ve created a new variable called logo spacing now all I should have to do is do this okay so I come down I replace all of these logo spacing and when I’ve done this I never have to touch these values individually ever again so I’m going to say let’s just see if we have look it’s all perfect now let’s say I wanted to increase the spacing let me get our other links back to so it looks more like a better menu here so I’m going to add item we’re going to do shortcuts for columns I don’t care whatever we’re just adding pages and then to fix that value is now for safe okay here’s my header good so we’re back I want to increase this spacing right here check this out I now go up to here and I can switch that to four rim and now I have more spacing on either side I can do 14 rim over here I get gigantic spacing I have full control from one area I no longer have to like a chump go make that change on every individual margin directive that’s in this list but that’s not all guys that’s not all my first I sound like an infomercial not all I’m selling y’all on sass right now okay so we can make this even more intelligent way more intelligent we have to introduce another somewhat advanced concept but I promise guys you’ve gone with me this far okay don’t leave yet right this is going to be so simple kind of kind of stuff but I’m going to go really really slow and we’re going to walk through this together all right just like we have up to this point you’re not dead yet so we’re all good so the way you define a mix in and I’ll tell you what a mix in is a mix in is like a recipe so I want a recipe this right here guys is a recipe for how to make this thing work right so I want to take this recipe and I want to make it I want to make the recipe dynamic so right now parts of the recipe are dynamic but parts of the recipe are not dynamic what is not dynamic this targeting which link in the in the menu that’s not dynamic but it could be dynamic if we were not a chump and we were going to make this a little bit more intelligent right okay so what we want to do is we want to use a dynamic recipe that is effectively a mix in and the way that we do a mix in the way we define it get this get this the way you define a mix in is by writing an act and then the word mix in okay so see it’s so easy right very very easy so now what we have to do is give our mix in a name all right so I’m going to do the name of let’s say what do we want menu logo this the hardest part guys coming over the freaking name for your mix in menu gap I don’t know I really don’t know it’s honestly it doesn’t really matter now the other thing that mix ends can do is you can this is where it gets dynamic you can add a new variable here and then use this variable within your mix and I’m going to show you exactly how this works okay so we’re going to call this menu gap the link number link number I don’t think we’ve used that yet okay yeah we use the data menu links okay so link number so I’m going to do link number just like this okay so now what we’re going to do is we’re going to steal our recipe so here’s our recipe right here so I’m going to copy it and I’m going to paste it into my mix it let’s talk about this this how we’re going to be able to use this all right so right now we have four links I want to go to where we have four data menu links equals four and I want to get rid of this manual recipe and I want to insert my dynamic recipe and the way I do that is at include and I’m going to do the name of my mix in which is menu gap all right so I’m going to write menu gap where we menu gap and then I’m going to use the parentheses and I’m going to put a four in because this is my menu with four link items this is the number that makes this dynamic okay so this is four so when we’re building this dynamic recipe you’ve got to think that this right here is a four all right so we’re going to do everything based on this being a four got it it’s going to be based on it being a four when there’s four items we need to target the second item which is four divided by two if you notice it’s always this first one that gets the margin right is always half the number of links so on six what’s it equal to three on eight what’s it equal to four good so we can get this value via a very basic formula so what we’re going to do is we’re going to this where it’s a little bit more advanced just follow with me we’re going to make two new variables and we’re going to make them within the mix and they don’t need to exist everywhere they just need to exist within our little mix in right here so I’m going to call this menu left okay menu gap will do menu gap left right yeah menu gap left and I’m just going to write no for a second menu gap right no just saying of these I think these these makes sense okay so now what we need to do is figure out what is menu gap left equal to what’s menu gap right equal to well we already know what menu gap left is equal to it’s equal to link number divided by two so remember if that was four this would be two the value would be two right now how are we going to use this well I’m going to go right here we’re going to go to this is our member this is our recipe our dynamic recipe and instead of this thing one this is going to say menu gap left which is actually equal to two okay don’t worry about that you’re going to see all this comes together in just a second I know this is probably the part where just watch and watch it work and then go back and watch it again and do it side by side okay now the thing is one very important detail you cannot just throw a variable into an in child like this okay even in SAS you have to do that special technique that I showed you earlier where we add the pound and the bracket right so it’s pound bracket then I forget that what that thing is called and then a dollar sign and then a closing bracket okay you can reference the variable like that so now I’m taking menu gap left and instead of two I’m going to do menu gap right the problem is we don’t know what menu gap right should be equal to well let’s look at our other formulas the way that this played out okay so six is half is three plus one is four is this true on eight half of eight is four plus one is equal to five so this formula is going to work across the board just fine so what we need to do is go back to our little mix and we need to say that this is link number divided by two plus one so that’s going to give us our new dynamic value for menu gap right and guys check this out okay I’ve got this working let me see if we got anything else to do nothing else to button up now watch this I can get rid of this I can get rid of let me open that okay I’m going to grab this I’m going to get rid of this manual recipe I’m going to get rid of this manual recipe and all I have to do is insert my mix in okay so there’s my mix in I’m going to insert it here I’m going to insert it here and then for two this needs to be two for four this is four for six this is six for eight this is eight bam bam thank you ma’am okay so check this check out clean this is I’ve got a mix in which is basically a dynamic recipe for how this is all supposed to work I’ve got my logo with variable I’ve got a couple other variables up here their SAS variables and then all the magic is happening right here with my data attributes two for six and eight are all good to go and let me show you how dynamic and maintainable this actually is so because we were working with four nothing is changed which is great that means we didn’t break anything right so now let’s just test it all out so I’m going to go to customize we’re going to go to menus we’re going to add and go to six okay so I’m going to add shortcuts and columns again so we’re going to publish so now check this out I’ve got six items now question can I just grab this menu go to style attributes and change this to six does it work save actually we don’t have to save you can see it right there in the builder just dynamically changes now what happens if we go to eight so now I’m going to add two more I’m going to publish we’re going to refresh our builder we’re going to see that our header is broken but no worries all I have to do is go to style attributes data menu links eight and we see that it fixes now in the builder we don’t have enough width but if we look at this on the front end I’m going to get out of the customizer we see that it now works with eight guys what if it was going to work with two let’s go down and go back to customize let’s go to our menus menu and let’s just start getting rid of these yeah remove and remove and remove and remove yeah tedious this is how do they not have bulk checklist yet okay so it’s broken because I haven’t changed my data attribute value yet I’m going to select my menu style attributes let’s tell the code that we only have two links now and hit save and guess what we’ve got it working now I want to go back to four for just a second so menus menu add items home for columns publish okay get out of the customizer let’s tell this that we have four let’s save let’s go up here excellent now what if I make my logo bigger right so I’m going to go up here my logo with needs to be 26 rim I’m going to go check it out on the front end oh my gosh spacing is still all perfect no issues there let’s go back to 16 rim see how that works out what if I want to change my spacing up a little bit for I go here oh my gosh look at that extra spacing I can even go to 14 if I’m crazy get all that spacing in there everything is super dynamic easily changeable based on my logo with my the logo spacing that I want everything else happens automatically if I ever needed to support guys check this out this is where the even more magic gets seen what if there was a scenario where I wanted to be able to have 10 links because actually if this was full with I could fit five and five up there I could fit 10 links well all I have to do is grab this little tiny snippet change this to 10 change this to 10 hit save I’m good to go let me prove this to you right now okay we are going to open our customizer we are going to go to menus menu and I’m just going to start adding stuff okay let’s add all this one two three four five six seven eight let’s add some custom links okay custom and that’s nine custom two that’s 10 let’s add to menu let’s publish okay obviously very broken until we tell our menu that there’s actually 10 links here and perfection super scalable super maintainable now begs the question how are we going to do all of this on mobile but that’s actually not important what’s important is that you learn this initial technique you learn about data attributes you learn about sass variables you learn about sass mix ends you created something very dynamic and scalable maintainable to make this work on mobile it’s so easy all you do is take this whatever break point you want to be at take this back to position static which will put it right here on the left and then just make this a little menu right oh here here’s here’s a good thing I will do one thing for you I will do one thing for you and this is oh gosh this is perfect because it shows you the scalability and maintainability factor of this code right okay so we’re going to take our little recipe right here right we only want this recipe we only want this menu to look like this at a certain break point and up so what I’m going to do is I’m going to find that break point we want it to be like right here okay so it 760 actually right here so at 990 because at here it’s going to it’s going to collapse down to mobile that’s what we want okay so here and up is where I want this to take effect now really it’s pretty much taking care of here by this mobile menu but if you were going to do something else for your mobile menu or whatever you you really want our code right here to only work at this break point 990 and up okay so what we’re going to do is we are going to create a media query and notice that we can create this media query and SAS right inside of our mix and which means that this media query is automatically going to apply to every scenario that we’ve outlined automatically I don’t have to touch it okay so media men with and we said men with equals no sorry men with it’s like this what was it 990 all right 990 pixels all right and then I put in my recipe and let’s see if we can get this all formatted probably let’s see if it will form me yeah it did okay perfect all right so basically at media men with 990 and up we are going to have the menu that we wanted right I’m going to go in menu I don’t want this to be let’s just say never okay there you go so you’re going to see it all modified right here because we want to see if this applies if our spacing applies only at that break point so I’m going to go to mobile I’m going to start bringing this in notice we have a big gap between okay we come in and I notice is mobile responsive yet we haven’t done anything to make this there goes our gap just win away at the break point we said so this now has effectively become a regular menu it’s got no weird gaps in it anymore it’s not supporting a logo in the middle so all we would have to do and I I said I was not going to do this but we come in we go to our header logo style and we go to layout and we go to position static there goes off to the left hand side we need to let’s see where is our normal okay now this would have to be collapsing here I’m just going to do this really quick mobile landscape I think is where we want that to be yes and then we want on our inner to be horizontal row and we want it to be centered okay and then what we need to figure out is why even though it’s position static oh it’s got the transform translates on it still so we need to go to transform the X zero translate Y zero and now we are where we want to be and then this little menu right here can go layout margin left auto this isn’t really part of it okay but you’re seeing how I’m easily able to get to something acceptable on a mobile device I didn’t want that to be a part of this tutorial because I wanted to focus on the centering the logo spacing everything out making everything dynamic getting the mix and getting the data attributes involved getting the variables involved that was the main part of this tutorial okay so now what I need to know from you we’re going to go back to camera here did this help you did this make sense is this the sass you were looking for right drop a comment below tell me what you thought of this tutorial and I want you to comment specifically to on the nature of doing the extra work to make it dynamic and scalable and maintainable versus just willy nilly throwing code copy pace have chunks of code all over the place I mean you saw me go back one more time look at how like organized this is we did a lot of work it’s not a lot of lines of code right it’s not a lot it’s just a little bit and so it makes it very easy you saw how I was able to add support for 10 right when it wasn’t previously there I didn’t have to copy this whole thing change these right all the stuff that would have been necessary if we were doing that manually this is very easy to maintain this is very clean very easy for people who understand sass to just come in here and see what’s going on right we all already saw that with data attributes very easy to change this stuff from inside of bricks to make it compatible once this code is written guys you really never have to touch it everything happens with the data attribute that’s inside of bricks right and in the menu builder inside of WordPress adding more links are adding less links so comment below let me know what you guys think of this tutorial did this fit the bill did you learn some good stuff drop your comments hit subscribe hit like love you guys and I’ll be back very very soon peace