Divi Transparent Header Menu - 2021

lots of people have asked me about how we get a transparent menu at the top of a full width header section this requires the use of the theme builder to build the header and i'm going to run through all the stages to make this complete header from scratch okay let's get started the first thing we're going to do to create our front page is we're going to add a new page we're going to give that a title of home and we're going to click on the use divi builder button which will take us into the builder there are three options here the one we want is build from scratch so we're going to click on start building now by default when you start a new page divi will already give you a section now we're not going to use that section because we want to add a full width section so we just need to choose the blue plus at the bottom of the section and from the insert section menu choose the purple full width menu and choose a full width header once we've done that we can save that we can go to the initial section and we can delete it and that will then set our page up with the full width header at the top next thing we need to do is style this header so if we go into the module settings i'd like another button here so i'm going to type in click here as soon as you type text in the button will appear i'm then going to go to the design tab the layout option i'm going to center the text and buttons and i'm going to make this full screen going back to the content tab i can now change the background i'm going to delete the solid color i'm going to go to the image tab and i'm going to add my background image to the page okay having done all of that we're now going to style this content in the middle so the first thing we're going to look at is the title i'm going to make that all uppercase i'm going to give it a weight of bold and i'm going to increase the size until it just fits inside these wooden piles okay that's looking good next thing we're going to do is work on the body text i'm going to increase the weight of that as well to semi bold i'm going to increase the size of that as well i think to 20 point and i'm going to space it a little bit more by adding a little bit of body line height in here so that things look a bit better okay that's fantastic also i want this width of this to sit inside the wooden piles to make the design look better so i'm going to go to sizing and i'm going to reduce the content width until that just sits nicely inside here fantastic okay now we're going to style these buttons so i'm going to come to the first button i'm going to choose use custom styles and i'm going to give the button a background ff 6600 which is a bright orange i'm then going to go down to the font style i'm going to choose bold and i'm going to choose uppercase and i'm going to give it two points two pixels rather of letter spacing okay that's fantastic now we're gonna go to the second button and we're gonna do exactly the same thing so i don't need to choose the color again because if we go to recent i can choose the same color i can then come down to the font weight again make this bold make this uppercase and add my two pixels of letter spacing i'd like this font to be a bit more readable over the background in order to do that i'm going to put a an overlay over the background so i'm going to go to the design tab i'm going to click on overlay make it black and then go in to adjust the color and i'm going to reduce the transparency until i can still see the image but also the text is readable so that looks fantastic so i'm happy with that and that's the end of creating the page now we need to save or rather publish the page and then we can start looking at how we can make this header sit on top of the background so to do this we exit the visual builder we head over to the dashboard before we go into the divi builder i'm going to assign the page that we've just created to be our home page and you'll see why in a moment so i'm going to go into settings reading i'm going to set your home page displays a static page and the page we want to display is the page we've just created and then i'm going to click on save changes now we can go to divi and the theme builder and what we're going to be doing is we're going to be adding a new template so click on add template and that template we want to be for the home page if you choose this home page option here it will apply to whatever page is set to home page in the settings and we've just set our new page to be that page so when we click on home page here and create template that will achieve what we need to do we then add custom header and we're going to build that custom header from scratch from here we can click on start building and we want two columns in our header row and the first of those columns well actually i'm not going to do that first thing i'm going to do so we can see what we're working on because everything we're going to be creating is white so that it sits on the image background i'm going to pop into the section and i'm going to add a light gray background so that we can see what we're doing that'll become clear later so first column we're going to add an image and the image we're going to add is our logo and we're going to choose the white version of our logo in the second column we're going to add a menu module and in that menu module we need to go into the background and set this to be transparent we can then go to the menu text we want this to stand out more so i'm going to make this white i'm going to make this uppercase and i'm going to make it bold we could also do with the font size being a little larger so i'm going to lift this up to 20 point now this isn't lined up at the moment so we need to go to the spacing setting and we need to add some padding to the top to bring this down so that it lines up with our logo very slightly less 14 that's looking good and we also want the alignment of that text to be right justified so if we come down here we can see right justified and that is looking exactly like we want it to look so before we leave this module there's two more steps one is to remove all of the space because we want this to sit nicely at the top of our site the next thing is we need to go through each module in turn so i'm going to start with the row and we need to ensure that the background setting is set to transparent so row first followed by the image module transparent we already did that module and finally we're going to set the background of the section to transparent which will actually remove it so there we go the final thing that we need to do is head into the section setting the advanced tab position and we need to set this to absolute this is the thing that is going to make our header sit on top of the image so once we've done that and chosen save we can then save our header and we can exit the builder all changes saved click on training visit the site and we've achieved what we wanted to achieve

Channel: Divi Coaching - Build Great Websites with Divi

Views: 4,480

Keywords: divi header, divi menu overlay, divi transparent header, divi transparent menu, divi theme, divi tutorial, divi builder, divi fullwidth header, divi transparent fullwidth header, divi transparent header menu, divi transparent hero menu, divi, divi theme builder, divi menu, divi full screen header, divi menu design, transparent menu divi, divi theme wordpress, divi builder tutorial, divi theme builder transparent header, how to make transparent headers in divi

Id: QJ8NrEcdjcI

Length: 8min 11sec (491 seconds)

Published: Thu Apr 01 2021