Make a Dynamic Responsive Header with 'Fluid Type' in Divi (CSS Clamp)

hello and welcome to divi coaching the use of fluid typography has been growing in popularity for some time now and we're starting to see it crop up in all sorts of different places we're going to have a look today at what fluid typography is and how we can create a header menu that scales according to the viewport width all the way down to the mobile phone size so if we have a look at this example here i've created a menu at the top of this page and i'm in responsive mode in chrome and you'll see that as i reduce the viewport size the menu text will eventually start to scale you can see now it's getting smaller the logo is getting smaller as well and the more i reduce the viewport size the more the text scales if we want to do that by device if we have a look at a laptop screen we can see how the sizes look there we can then move down to say an ipad pro and we can look at that in portrait and landscape mode we can then come down again in size to an ipad and again we can look at that in portrait and also in landscape mode and we'll see that all the way through the menu text stays balanced as does the logo and that's what we're going to look at creating today let's get started i haven't actually built a full site for this demo but i have built a menu so from the wordpress dashboard if we go into appearance menus you can see that i've created a menu with five items and two additional sub menu items so that we can make sure that everything works in proportion as we design our responsive header so from the wordpress dashboard we're going to choose divi and we're going to choose theme builder we're going to add a global header so we're going to click on add global header and we're going to say build global header and that will then take us into the divi builder screen from here we're going to choose build from scratch and click on start building i'm going to add a single row i'm going to go into the settings for that row into design and sizing and i'm going to check that row has a 80 width and i'm going to change the maximum width so that it is also 80 percent next thing we're going to do is go into the section settings into the advanced tab and click on css id and classes now we're going to add a css id to this section so that we can target it with the code that we're going to use to change the size of our fonts and logo so in this case we're going to go to the id rather than the class and we're going to give it a name and i'm going to call it fluid header okay once we've done that we can click on the tick to save next thing we're going to do is click on the add a module and from the insert module we're going to look for a menu module and we're going to add a menu module to the page we're then going to come down here to logo and we're going to add an image we're going to add our logo in my case i've actually used an svg file so that it scales well but you can use a png or anything else if you do use an svg you will either have to add a plug-in to wordpress like safe svg to allow you to upload it or you'll have to make some modification to your functions.php code the plugin is really safe and easy to use you can install it upload your svgs and then uninstall it afterwards so pretty straightforward process okay once i've chosen my logo and clicked on upload an image and i now have my logo now we need to do some formatting so i'm going to come into the menu i'm going to go to design layout and i'm going to come down to menu text and scroll down and i'm going to right align the menu text now i'm not going to do anything about sizes we're going to do all the changing of the sizes of the logo and off the menu using our custom css so that's all we need to do at this stage we can now save this click on the white cross to come out of this and click on save changes we now go back to our site we will see quite an odd looking header because we've got this giant logo and this tiny little text so that's what we now need to go in and customize using our css for the css we're going to be using the clamp function this allows us to set a minimum value in text that will be pixels and a maximum value again in pixels and in between a dynamic value in percentage or viewport width or viewport height this means that the text size is allowed to vary as the display width varies but it will never get larger than the maximum value or smaller than the minimum value the same principle can be used with the clamp function for controlling the size of other objects there are a few different places where it's possible to insert custom css this can be in divi under theme options it can be in the customizer or it can be via a child theme i've chosen in this case to use the customizer so if we go to the theme customizer and once the menu is loaded click on additional css and we're presented with a nice place where we can start to insert our css okay let's zoom in so we can see a little bit more clearly what's going on now the first bit of css i'm going to paste in is going to enable the full menu on tablet so what it's basically saying here is that any device with a minimum width of 768 pixels it is going to display this menu and it is going to hide the mobile menu by having a display none property the next thing we are going to do is use the first of our clamp expressions to scale the logo so if we paste in the snippet here you can see that immediately the logo changes in size and if we look in the clamp function here we can see why so we've looked inside our section which has this id of fluid header and we've looked for images and there is one image in there we've then defined the max width of that image to be clamped between 150 pixels as the smallest value 350 pixels being the largest value and the normal value that will scale as we scale the screen is 20 viewport widths so that's how we've dealt with scaling the logo we can now move on to the text the first thing we're going to do is use our clamp function to target the menu text so if we paste in our snippet here you'll see that we're targeting the a tag inside our fluid header id and if we look at this clamp statement we can see here that we have set the minimum font size to be 14 pixels the maximum font size to be 22 pixels and the variable font size if you like in between to be 1.5 viewport widths and if we zoom back out again for a second we can see that the font size has already changed at the top of the screen okay let's zoom back in the next thing we're going to target is the drop down link because at the moment the size of this is too large and in order to do that we need to add another little bit of css so let's zoom in again and we'll add that in this case we're looking inside the fluid header id we're looking for a list which is the horizontal menu list so this list here and then inside that horizontal menu we're looking for another list which is the list of the sub menu items and then within that list we're looking for an a tag which is the link and we're targeting that with our css again we're using the clamp expression with a font size of 12 pixels minimum 18 pixels maximum and 1.5 view width units for the variable unit inside so that's now taking care of all of the text final thing we want to do is reduce the width of the spacing as the viewport gets smaller and a final piece of css is used to target that so let's just paste that in now and here we're using the clamp function to set the padding on the left-hand side of each of the menu items so if we zoom back out again so we're looking at the padding setting on the left hand side of each of these items and we're setting that to a minimum of 2 pixels a maximum of 20 pixels and the optimum variable value in the middle to one viewport width so that now completes all of our css we can now zoom back out we can publish all of our changes we can now check that everything's working as it should so we can now see that on full size we have nice clear menu well spaced with a drop down menu that also looks good if we then go into more tools into developer tools and we enable responsive mode we can look at the different sizes so if we come down to a laptop we see again lovely functional menu come down in size again to an ipad pro automatically zooms in but here we are so you can see an ipad pro all looking good again you can rotate that into landscape mode and also all looking good as well same thing with an ipad so we can now see a really good looking ipad display also works in landscape mode and if we want to come down even smaller still to something like a pixel 2 say phone we can now see the mobile layout complete with the drop down hamburger style menu i hope you found this tutorial useful the clamp expression is definitely one that is worth spending some time playing with to understand exactly how it works it can be applied to many different elements and can really help to make your site responsive browser support is extremely good obviously not supported ie 11 and prior to that but other than that very widely supported if you have found the lesson useful and you're not already subscribed to my channel then i hope you'll be able to subscribe and always appreciate a like because it does help the youtube algorithm to show my videos to more people thank you very much and i'll see you next time

Channel: Divi Coaching - Build Great Websites with Divi

Views: 1,008

Keywords: fluid typography, divi theme builder, divi header, divi header menu, clamp function css, clamp function divi, responsive header divi, divi theme builder header, divi builder, fixed divi header, divi theme, divi, divi builder tutorial, divi builder tutorial 2021, divi theme builder menu, divi builder header, divi theme tutorial 2021, divi fluid type, divi fluid text, divi fluid, divi fluid typography, divi responsive, divi responsive menu, clamp text divi, divi fonts

Id: FNWnUohieww

Length: 10min 0sec (600 seconds)

Published: Mon May 17 2021