How to Create a Simple Toggle-Based Overlay Header in Bricks Builder

0:00:00
What’s up fam welcome back to the channel today’s training is going to be one of those tutorials that you find yourself using over and over and over again very practical very useful we’re going to talk about how to create a simple overlay header in bricks builder but not just any overlay header it’s actually a toggle based overlay header which means that you can toggle the header into overlay mode or keep it as a standard header on a page by page basis you have complete control over this and it takes one second to switch between the two different types of headers I’m going to jump in and show you a live example of this then we’re going to talk a little bit about why this is so important to have on a website that has an overlay header and then I’m going to actually show you how to build it so let’s go ahead and share my screen this is a website that I am working on currently for a client it is in development and as you can see this main page right here has a hero section with an overlay header but not every page when you have an overlay header situation on a page like this it doesn’t necessarily mean in fact it usually doesn’t mean that every single page of the website is going to have an overlay header and herein lies the problem with overlay headers even if the builder makes it easy to create an overlay header which bricks does not okay we’ll talk about that in just a second but even if the builder does make it easy to create an overlay header it usually doesn’t give you an easy way to toggle the overlay on and off on a page by page basis and you really need this to happen because if you go to the how it works page I’m going to click on that let it navigate over there you’re going to see that it does not have an overlay header it has a standard header and if you want to do that you can do that and if you look between the two notice that when it’s an overlay the logo is a white logo and the links are white but when we go to the how it works page you’re going to see that the logo is black and the links are a different color they’re the brands colors the ability to go from page to page and just have a standard header on these pages and then whenever you want to you can switch to an overlay header is tremendously valuable and I think one of the situations that a lot of people find themselves in with header overlays because this is not typically easy to do with with most page builders is when they want to have an overlay effect with their header they force every single page to have it which means you can’t have a page that just has a normal hero section like this you always have to because what would happen if if this was still an overlay mode this would be a white logo which means you wouldn’t be able to read it and these would be white links which means you wouldn’t be able to read them and that’s a big big big problem so it forces you to have a dark background color for your hero or a background image of some sort on every single page now on your main pages you can probably design you know hero sections to absolutely do that and people will say you know it’s not that big of a deal but actually it still is that big of a deal because then you solve your 404 error page to contend with you have your blog archive pages search results pages you have to make sure that you’re structuring your hero and every one of those pages every single template everything every part of your website has to be constructed to adhere to this overlay hero that you’re using site wide it’s much much much easier and much more flexible if you can simply have a normal header right so all of your pages are fine by default you don’t have to have any special way of constructing your website it’s a way of constructing the page to account for the overlay header so they all have a normal header and then on the pages where you actually want the overlay like I’m going to go back to the homepage now you can actually just toggle it on and boom the other thing we don’t want to do to make this happen is to create two headers you’ll see this very often where people create one header which is going to be our overlay header you create a separate header that’s going to be the standard header and then they find a way to toggle between the two and even that solution is not a good solution and the reason is you are now having to manage two different headers so whenever the links change in one header you got to remember to change it in the other header it’s just not good for scalability it’s not good for maintainability it doesn’t pass the three month rule that I often talk about you know you build a site and then you come back three months later do you remember all the things that you did all the special steps that you took to make things work and when you create an edit or you create a new page are you going to remember the list of things that needs to be done to make sure that it all works properly that double header situation where you’re toggling between two different headers does not pass that rule and what you’re going to find when I show you how to build this one is that it all the magic happens automatically let’s go ahead and I’m going to get rid of this and we’re going to jump into our training environment so I am going to first go to bricks templates and we’re going to see if I even have a header template on this site and it looks like I do so I’m going to open up that template and there is my header right there now it says no nav menu found that’s kind of a problem so we’re going to need a nav menu to work with here so that’s because I know you by홀 see there we go we see that now okay now I’m going to grab this and I do want to make sure that top level menu typography color let’s do like I change those links to black why is it not allowing me to what is going on here okay there we go now it’s working I was clicking colors and it was not doing anything all right so I’m gonna go ahead and hit save and let’s take a look at this on the front end all right so this is my standard header this is the header that I want on a new page and every page on the website by default now what I need to do is we need to we need to do the magic to create the overlay header all right so what I’m gonna do here is I am going to first create the toggle right we need a toggle on every page that we’re working on that allows us to choose does this page get a overlay header or does this page get a standard header so let’s go ahead and create that toggle so I’m gonna go into metabox we’re gonna go into custom fields I’m going to go to add new all pages this is gonna be a even though we’re creating a header style toggle we’re actually assigning these custom fields to all pages and we may want to do other things on our all pages group other than just the header style right so I’m just gonna name this group all pages and then I’m going to create a radio let’s do a radio field a radio field is just bullets right it’s two different options three different options whatever but you can only have one selected so it’s not like a checklist where you can check off multiple things it’s an option you have you have one or the other right all right so I’m gonna open this and we’re gonna call this header overlay style just like that and then for my choices I’m going to have standard which is going to be my default and then I’m gonna have overlay all right so standard is gonna go here in the default value field as well so I’ve two choices but one default and then I’m gonna go ahead and hit publish we’re gonna go to settings and make sure that these custom fields are assigned not to post that’s the default we’re gonna remove that we’re gonna assign them to pages we’re not gonna put any other rules in so basically this radio field is gonna show up on every single page of the website as an option now if you have custom post types that you’re using and you want these added to those as well you would have to create a you would have to select the post type here I don’t have any on this training site in particular but if you did they would show up here and then you make sure that they’re selected if you want this available on post then absolutely you should why are there two posts I don’t know but you should absolutely choose post as well right here for this purpose of this training I really only want to focus on pages okay so I’m gonna go ahead and save that we’re gonna go over to one of our pages here and let’s do I don’t even know what these pages are let’s go to hero Mike what is what is going on with hero Mike oh this might be a really good one okay so we’ve got a nice hero section here and this I think would look perfect for having an overlay header and so what I’m gonna do is I’m going to open hero Mike and I’m going to scroll to the bottom and look I have it right here so header overlay style standard or overlay and you see on this site that we already had a footer CTA I was doing a training on conditional logic for footer CTAs so I have standard and overlay as my header style let’s go ahead and switch it to overlay so remember it was standard by default I’m gonna go ahead and switch it to overlay and then I’m gonna hit update now I’m gonna go to that page okay we can actually just refresh the page right here obviously I don’t have an overlay header just by switching the toggle to overlay because I haven’t actually instructed anything to happen I haven’t designed an overlay header so here’s where we need to stop and pause and talk about the strategy of how we’re going to approach this so we’re going to use something called a data attribute I’ve done trainings on data attributes in the past but you can think of a data attribute almost as like a class right so you know you have a class where you can assign a class to something like I could assign the class header overlay and then I can style the class and the item the header in this case that has that class header overlay would adopt those styles however we can’t like dynamically add a class to a header without JavaScript if we want to do this with just the builder we need a simpler way that the builder actually supports natively that bricks in this case so data attributes is one of those things we can assign a data attribute dynamically to the header using bricks we don’t have to write any custom code whatsoever so I’m going to show you how to do that right now so I am going to go edit my let’s close hero mic for a second here’s my header template we’re going to select the header right here all right and then we’re going to go down to style it doesn’t matter if you do this on a class or ID because attributes are actually added directly into the HTML so they don’t have anything to do with classes or IDs or anything like that so you go ahead and hit the attributes tab you’re going to add an attribute and we’re going to create a new attribute now all data attributes need to start with the word data that’s just how they work that’s the standard practice so data but then you can call it anything you want so in this case I’m going to do header style so we have data header style and then for the value we could write standard or we could write overlay and then we’re going to be able to style this with CSS based on whether it’s standard or whether it’s overlay well really for standard we don’t have to do anything we only have to style when it’s in overlay mode right however we can’t just write the word overlay right here because now it’ll always be an overlay right because there’s nothing dynamic about this this has nothing to do with that little toggle switch that we made we actually need to take the value of the toggle switch and inject it here dynamically and bricks allows you to do that out of the box so I’m going to go ahead and hit the little lightning bolt here and then I’m going to go down and we are going to find the new custom field that we made it’s called header style or do I have to do dynamic data first okay data header style where why is it not there oh you know what I had this open let me go ahead and hit save it doesn’t it can’t access that part of the database yet because this page was open before I created the toggle so I’m going to go ahead and refresh now when I click on my header and go to my attributes hopefully we can find that in the list so again click the lightning bolt and then I’m going to go to there it is header overlay style so I’m going to go ahead and click on it and now what is doing is it’s dynamically injecting the value of that toggle into that field right there so I’m going to go ahead and hit save and I want to show you what’s happening on the front end all right so I’m going to go to the front end I’m going to right click and I’m going to inspect my header and if you look all right let me zoom way in right here bring this over all right let’s see if it’s do it’s not doing this properly data header style it does have the data attribute but the data attribute has no value my friends okay so oh you know why it’s because okay I get it we’re not we’re pre-viewing a template basically we’re not previewing hero mic so I need to refresh now we’re actually previewing a page okay and remember it’s this page that had those toggles right so the page has the header value so what I’m going to do is inspect hero mic here and now we can see it okay let me pull this over here you can see data header style equals overlay so now what I’ve effectively done is I’ve added this data attribute dynamically and let’s let’s just check real quick let’s just check and make sure it is in fact dynamic so I’m going to go to pages we’re going to go to hero mic and I’m going to set this back to standard and hit update and then we’re going to refresh and we’re going to inspect and look at this it has changed to standard now see how that’s happening dynamically so once again I go to hero mic I’m editing my page I say hey I want this page to have an overlay header so I click overlay right there and then I hit update and then if we refresh on the front end we can see right there that it has changed that data attribute value to overlay okay so now what are we going to do now we have to style our data attribute just like we would style a class it’s very very easy now we can’t style the data attribute in bricks like natively but we can do it with just some simple CSS so you can write your CSS wherever you prefer to write your CSS as you know if you’ve watched any of my videos before I like to use WP code box I feel like it’s the best way to write external CSS especially since you can use SAS which is like supercharged CSS so what I’m going to do is come down here I’m going to zoom in a little bit so you guys can see this in detail and we’re going to just learn really quickly how to style a data attribute it’s very very very simple remember we have actually let’s let’s just look at the HTML okay so I’m going to inspect this header again all right so data header style remember that data header style because we’re going to write that in just a second equals overlay with a capital O all right so I’m going to go back to WP code box and all you have to do is put your data attributes inside a brackets like this so data header style is that what we have data header style and if the data header style equals overlay then we’re going to do some things it’s as simple as that so you have your data attribute name you have if the value equals this and then let’s style some things just like if this was a class there’s almost no difference okay so now we have to decide what we’re going to do if this header is in overlay mode what what should that look like well number one we’re going to position it absolute okay so we’re going to take it out of the flow of the document this is how it’s going to sit on top of our whatever the section is that is first right so I position absolute and whenever I position absolute something I need to align it right I need to assign it a position on the page so I’m going to do top 0 and left 0 and the because I need to make sure that this is always on top because it is a header after all I’m going to go to Z index and I’m going to do like 999 9 something like that okay I’m going to say that snippet we’re going to go back and we’re going to see and oh my gosh look at this we have an overlay header just like that okay and I’ll scroll down it’s not sticky because I didn’t want it to be sticky I just wanted to do overlay sticky would be another thing that we would have to talk about right now we’re just focusing on overlay and by the way I’m not a huge fan of sticky headers all right I tend to I like overlay headers even though there are pain in the ass but this technique actually makes it a lot easier but I just I’m not a huge fan of sticky headers so I do like overlay headers though and that’s what we’re going to focus on so you see we have some problems problem number one is we have a dark logo problem number two is we have dark links and this is where somebody would come in and say you know what we’re going to need we’re going to need a second header that has a white logo a different logo in it and a different styled nav maybe a nav of the different class or something like that and in fact we do not need to do that nor should we attempt to do that like I said before that’s going to cause scalability and maintainability issues we want one header to deal with and we want that one header to simply behave differently when it’s in two different modes all right so and we can use our data attributes to do that we can use we can use a lot of different things okay so what we’re going to do first is we’re going to solve this menu issue right so we see we have black links right here so I’m going to go ahead and inspect this and I’m going to see right over here on the right hand side what is controlling the color of these links I’m going to grab that code right there and I’m going to come over and I’m going to nest this okay so when the data header style is overlay I want to target this which is basically a link in that navigation okay so I am going to open this up and because I’m using SAS I can easily nest like this you would not be able to do this with normal CSS okay if you wanted to do it with normal CSS what would you have to do you’d have to write data header style equals overlay again and then you would have to add that and then you would have to do your styling in here and you can see why that’s super inefficient and why SAS is way better you can simply just nest this below and SAS is going to take care of it perfectly for you okay so what do I want to do to these links well I can try to color them white or something like that in this case I want to actually just use a CSS filter of invert there are there are multiple ways that you could go about this and you know when I’m building this for myself what I find is that doing invert tends to work a little bit better all right so what we’re going to do because that kind of takes care of foreground and background stuff all at the same time it’s a little bit more efficient in a lot of cases not every case but in a lot of cases and you can see what’s already happened is that they’ve inverted themselves now they’re actually weren’t they were not black before they were a base color which is like a dark dark dark dark dark dark dark dark blue so it kind of seems black but it wasn’t pure thus when I invert it’s not going to be pure white so what you can actually do is just say color black and then it’s going to invert black which makes it will it will be perfectly white okay so if I can actually find there we go so now those links are perfectly white and notice that that all happens or only happens I should say in header overlay mode if I went to a different page which these aren’t even real pages let me go to I should actually made an actual nap let’s go to the contact look at this there’s my contact page I haven’t done a single thing right all of my existing pages on this website and this is like the good thing about this technique all of my existing pages on this site still look exactly like they did before I don’t have to go edit them and make changes or assign them to the standard or anything like that the only page that is different is hero mic and that’s because that’s the only one that’s an overlay now what we need to do is we need to take care of this logo right here all right so the way that we’re going to do that is actually inside of bricks so for right now we don’t need any additional CSS all right so whoops I hit the wrong button all right so I am going to go to bricks templates and we are going to open the header template again so I’m going to edit with bricks I’m going to close this we’re getting a little tab heavy here again tabby as I say all right let’s just close all those all right so I’ve got my template and I’ve got the page that I’m working with all right so what I am going to do is I am going to duplicate this logo element right here and then I am going to choose a different logo I’m going to choose this white logo right here I’m going to insert that we’re not going to pay attention to the fact that they’re actually two different logos but just pretend of the same logo one is a white variation and one is a dark variation okay now I’m going to go ahead and hit save and I want to see what happens on hero Mike oh gosh this is a awful right we have a white logo and a black logo and we only want one of them to show up but I think you’re probably thinking ahead already and you’re like have a we can use we can use the conditions feature in bricks to conditionally hide a logo or show a logo based on the header overlay style and you’re absolutely correct that was fantastic thinking by the way okay so we are going to go in here to the template area I’m going to click on we’re going to start on the white logo that’s probably going to be the easy one all right so I’m going to go ahead and do conditions right here it’s a little icon next to the search icon for conditions I’m going to add a condition and I’m going to select dynamic data and my dynamic data is going to be my toggle again to my header overlay style and I’m going to say if my header overlay style equals overlay then we’re going to show this logo that’s how the conditions work is if the condition is true the element is shown if the condition is false the element is hidden so if it equals overlay then this is going to show if it does not equal overlay then this one is going to show now notice I’m not saying if it equals standard then we’re going to show this one I’m going to say if it doesn’t equal overlay then we’re going to show this one and here’s why there is a what I consider to be a glitch in custom fields whereas if you have a bunch of pages already published and then you go create an option custom field like we did and you assign it to those pages even if you set the standard as default it doesn’t matter if it’s overlay header or any other kind of option whatever you said is the default actually does not apply to any of those existing pages until those pages are resaved and so if you make logic based on this equaling the default but the default hasn’t actually been saved on all those pages yet because you don’t want to open up every individual page and save them then that that value is not going to match and both of these logos are going to show at all times until you go from every go to every page and resave them to make the default show up which now they have a value and that’s why you saw earlier when I was looking and I was like oh it doesn’t have a value what’s going on that’s why right so we want to avoid that and the way we avoid that is by saying hey well we know that if there’s no value then it doesn’t equal overlay right so then we’re it’s going to hide itself so we use the same exact condition just the opposite basically so I’m going to do dynamic data if that makes sense all right so I’m going to click on this header overlay style and then I’m going to simply say does not equal overlay I don’t care about that word standard that we used at all it’s just there visually so somebody can choose standard or overlay right because the choice makes sense to them but the conditional logic only is focused on the word overlay is the word overlay there or is it not there that’s the safest way to build this logic okay so I’m going to hit save and we are going to do a little refresh guys the dark one’s gone the dark one is gone now here is the real test the real test is can I go to a different page and is the dark one still there and it’s the light one gone so that’s what we’re going to look at right now so I’m going to go back and we’re going to go to pages and I’m going to view that contact page again guys it’s dark there’s no light I don’t think there’s a light one let’s inspect make sure there’s no hidden light one there no no we’re good okay yeah there’s nothing in between those elements all right so as you can see we have achieved the ability to go create an overlay header and we’re going to prove this to you right now so let’s go ahead and edit hero mic all right so I’m going to choose standard now which means remember our conditional logic says if it does not equal overlay then show the standard header if it equals overlay show the overlay header so we’re going to update there and then we are going to view on the front end so there is mic with a standard header perfect right it’s got the right color nav it’s got the right color logo guess what we want mic to be an overlay header so all I’m going to do is choose overlay I’m going to hit update I’m going to refresh and now I don’t have to do anything else I don’t and now I don’t I don’t have two menus to manage to to headers to manage none of that nonsense it just automatically works and this passes the three month rule because anybody that comes along three months from now creates a new page all they are met with is a very let me go yeah here we go a very simple option header overlay style what do you want standard or overlay they choose they hit update and it just works and there’s nothing that can potentially break all right so let me go back to main camera here that was the full tutorial I know that there can be extra stuff we can talk about how to add automatic extra spacing to account for the height of the header that’s all can come in future tutorials I’ve done in past tutorials as well but I just wanted this tutorial to focus on the core of getting you an overlay header on a page by page basis using a very simple toggle I wanted to introduce you to data attributes if you’ve never heard about data attributes before or never used data attributes before and this is one of those tutorials that I would say guys because it incorporates so many different fundamental techniques I would follow it even if you don’t care about overlay headers even if you don’t need an overlay header follow this tutorial step by step because you will absolutely learn things that make all of your development way better it will up your game as a developer if you guys like this video make sure you hit like you’ve got to show me that you like it you can’t just like it in your head right liking it in your head is fantastic but doesn’t do me any good it doesn’t do anybody else any good so you got to actually take the mouse you got to actually click the like button and then while you’re there because the like button is very it’s in a very similar proximity to the subscribe button go ahead and just a little bit to the left right and click the subscribe button and then because the bell that’s for the subscribe button you know the notification bell it’s like right it’s even closer to the subscribe button you don’t have to really go down it’s like a few pixels over you just hit the bell and then you get notified for every video that I publish and then you never miss the gold that we’re publishing here on this channel all right hit like hit subscribe and then drop a comment below let me know what you think of this tutorial I’ll be back very very soon make sure you also are attending my digital agency table talk live sessions every week now on Wednesdays you can find those on the channel hit the notification bell on those so you don’t miss them tons tons of golden nuggets throughout digital agency table talk all right that’s it that’s it I’m out peace