6.2 Create a sticky header menu in the Divi Theme Builder

[Music] now we're going to create our global header in the divi theme builder we'll start with the basic menu with the logo to the left and the menu links to the right and we will create a menu item with the drop down sub menu as well and we link to our subpages on the website and we also have an external link that will open in a new tab so i'll show you how to achieve that as well if we scroll down you can see that this header is sticky and it changes a little bit when we scroll so it doesn't take up as much space from the actual body content and then we will add this top bar with social media icons to the left with a nice hover effect and a call to action button up to the right and in the next step we will look at the mobile menu for tablets and smartphones and it's a classic hamburger menu and we'll do some small css tweaks as well to make it look better okay so we jump into our development site and i just added a little bit of content on the home page just to make it possible to scroll the menu so you can see how how it behaves when it's sticky the first thing we need to fix is this you can see that we have a bunch of links that shouldn't be up here in the menu so we start by going to our wordpress dashboard and from here we go to appearance and menus and we're going to create our main menu so i'll just call it main menu and i will also say that this is our primary menu and click create menu now i can add my pages on the website so i can actually choose view all so i see all four and i click select all now i can change the order of these links so here i am see let's go back here we are so we have home about us news contact us and the external link so here we have home about us then we have news and then contact us so i just drag and drop to achieve the order here that i want and then we have the two sub menu links here on the news which is the category pages so let's go back and check our categories and here they are case and inspiration so i will select all and add to menu now in order to make them a sub menu i will just drag this one to news and then i will indent it a little bit like this and you can see that now that it is a sub menu to the news link and i'll do the same thing for inspiration and there we go and i can actually save the menu so if we will preview the site now we can see that it looks a little bit better we have the right or the correct links here in the menu but then we have the last one which should be an external link so then i choose custom links and i type in the url that i want my custom link so in this case it's the divi mundo and the link text should be divi mundo and i will add this to the menu and it will end up last in the list and i want this one to open in a new tab and for some strange reason there are no option for this when i open here so there is no checkbox so this is a little bit hidden by wordpress so i have to browse to the top and expand screen options and here i can click to display link target when i go back down here i can click this new checkbox open link in a new tab and save the menu so if we go back here and refresh the page you can see that we have the divi mundo link and if i click it it will open in a new tab okay so we have placed the correct links in the menu let's start designing it so we start at divi and dv theme builder so this is the place where we are creating our global templates for the website so we will have a global header and we will have a global footer and then we'll create some more templates later in this tutorial so we click add global header and the build global header and we will build this one from scratch i'll start by inserting a single row with one column and i will insert a menu module in this row so i start from menu and choose the menu module in the content tab i can see that it's my main menu that we just created that's active if we click logo we can choose the logo for our website so i click this one that we upload uploaded to our media library and now we can see the logo and since the text is white you can see it against the light background but we'll fix that in a minute under elements you can add a shopping cart icon if you use an ecommerce store or a search icon like this but will not use it for this website in the background tab i can change the background color and we will use this dark dark gray it's 1c1c1c from our color palette so now we can see the full logo but now the text disappeared on the dark background so let's go to the design tab to fix that and we click menu text and we can change the menu text color so i'll change it to white and now we can see it again we should also change the menu font from the default font and we actually shall use a font called carla so that's a google font that's included in divi and we will use it throughout our website and if we look at the demo site we can see that it's in all caps and that we have a nice hover effect with gold when you hover the menu so we'll fix that too so all caps we can click in the menu font style there we go the menu text color is white and to change the hover effect this is a really neat feature in divi you can just hover menu text color option and then you can click this mouse icon for setting hover effects and now i can click this hover state and choose gold so now i can see how a link would look look like in hover mode and if i click here again in desktop i can see how it looks like in idle so this way we can change background colors and lots of stuff in db it's really really powerful we have the menu text i will make it a little bit bigger 16 pixels so now it starts to look like something also i want the menu links to be right aligned so it should look like this with a logo to the left and the links to the right i could just mention in the layout tab in the top i can choose if i want to have left aligned logo if i want it to be center lined like this or if it should be inline centered so the logo is between the menu links but i'm choosing the left aligned design we open menu text tab again and we choose to text alignment right good okay so i'm fully aware that this looks a little bit strange with the white padding around so we will fix that i will go to the cog wheel on the section settings and click background and change that from white to dark gray so now it looks a little bit better and now i will change the sizing so it's not that high maybe something like that and like that and also the padding for the row i will just remove that like this and if you prefer to see the x exact numbers instead of dragging you can just click the cogwheel go to the design tab and spacing and here we see that we added some padding but it wasn't the same so i would like to add 15 pixels there and 15 pixels there nice so we got our header i can just save something what would happen and can also see here that the sub menu looks okay but we have a blue line there that i would like to remove so i will open the settings for the menu and go to the design tab and the drop down menu and i will check the drop down menu color and i will set it to transparent and now it's gone so i think this looks more clean i could also add the golden color here like this but i like to just remove it like this okay nice so we save and close this one and to be sure i click save here in the dvd theme builder as well and now we can check our website out by refreshing and having a look and here we have a quite nice menu going on and if i scroll we can see that it's not sticky so we are going to fix that we're going back to the db theme builder and editing our global header first of all before i forget it we should do one more change so this is the row i will do some changes to the row settings i want this to be a little bit wider so if we check this page we can see that the logo is starts here and the menu stops here and this one is a little bit more narrow so i wanted to take more space so in the row settings i go to design sizing and width so i will set the maximum width to 1200 pixels so now it's a little bit bigger it can never be wider than this and it will be 80 percent of the screen width up to 1200 pixels so that's how width and max width works i will actually do a little addition here because i want all my rows in the entire website to be have a max width of 1200 pixels so we are going to use global presets which is a really powerful addition to dv so if i right click the max width setting i can nope i right click the design setting sorry and i say that i want to apply this to the active preset are you sure this will affect all rows using the row default preset across your entire site do you wish to proceed yes so what this mean is that all future and past rows that are created on this website will have this value i could change this in a specific rows if i want to but the default value will be this so this is a super easy and convenient way to create global templates in db so i don't have to do this setting in all rows in the future and to change a global preset you can go into the module or the row or the section and you see preset up there default and i can click the pen and now it's a little bit more grayish color up here and it's the presets and i can change the global presets here so i can see that this is a custom global preset since it's built darker so this is a way to update your global presets we're going to look a little bit closer into this later in the course so this was just a sneak peek so i will save this and yes the task was to make this menu sticky so that if i scroll it should stick like this and also when i scroll i want the logo to disappear like this and i want the text to go out to the corner and be a little bit smaller so it won't take focus from my main content so let's start by doing it sticky so i will edit my section settings by clicking the cogwheel and i go to the advanced tab and there we have scroll effects and you can do lots of cool stuff here i will check the sticky position that is default do not stick and i will choose stick to top then you can do lots of fancy fine tuning here but i will stick with the default settings here and click the green button to save i will save my settings and i will go back to our development website and before the menu worked like this now when i refresh it it's actually sticky and follows me down on the website so it's pretty easy to make a sticky menu in tv and since it's a global header in the theme builder it will be displayed on all pages that was an external link so it won't be displayed there for natural reasons but on all the pages on my website you will see this header okay so we wanted this shrinking effect on scroll so we go back to the theme builder and we will edit the menu module first to fix the logo so i will go to design and sizing and there we can set the logo width and i will set it to its auto now but if i want to change the sticky mode it's similar to how we made a hover effect before so i hover this setting and there's the hover effects and on the side of that we have this pin symbol that is our sticky effects so if i click that one i can choose the sticky mode and i can say that this logo should be zero pixels wide when it's sticky so i will save and this will auto save sometimes let's see if it works and i will try to refresh my page and now when i scroll we can see that the logo is actually disappearing on scroll okay so now we want it to shrink both the height or the padding and also the text and it should be out to the right so this is the look that we are going for so let's change the section width first of all so the text could move out to the right corner so we go to the design settings for the row and there we have the sizing and i will say that it should be 100 wide but it should have a maximum width of 95 percent otherwise the text would be in the corner looking a bit tight and i actually made a mistake now so i will remove that so what i have to do first is i hover the width and i click sticky settings here the icon and i click the sticky mode and now i say 100 otherwise it would apply to all views even the when you just enter the website and i do the same for max with i hover it and i choose the sticky mode there and i say that it should be 95 there we go and i also want this text to be a little bit smaller so i close the row settings and i click the menu module i click the design tab and the menu text and i think you're getting a grip of this now i have the menu text size so i hover it and i choose the sticky mode i click the pin symbol and i choose sticky mode and i change the text size from 16 pixels to 14 pixels on sticky mode and we save it here and we save the template design so if i click my development site it looks like this before and now if i refresh it looks the same when it's not sticky but when i scroll you can see that it's different the logo disappears and the text shrinks and jumps out to the right corner so just one small adjustment here i want this padding here to to shrink so that the menu isn't that high so i want this effect that it will be a little bit tighter in the design so i'll go back to the theme builder and i will go to my section settings and i will hit the design tab go to spacing and you might remember that we had 15 pixels of padding so if i hover and click the sticky mode and switch to sticky state i will say that i want to have zero padding on top and zero padding in bottom when in sticky mode so i close this one and it's order saving for me so i go back to my website i refresh and now when i scroll you can see that the log is gone the text is smaller it's out in the right corner and it's not as much padding so it's more discreet so this looks pretty neat i think so now it's just one more thing to add to our desktop menu and that's the top bar here with social media icons with a nice hover effect and the call to action button okay so we will head back to the theme builder to continue building our menu and adding the top bar so i'll hover this section and click the blue plus sign to add a new section and i choose a regular section this time we should insert a row with two columns we'll add the social media links to the left and the call to action button to the right and i will insert a module that's called the social media follow i will close it for now and we'll add our background color to this section so i click the cogwheel for the section i click background and i choose the dark gray background there we go okay so let's fix these social media icons i click the cogwheel for the module and let's go to the first one the facebook icon so i can change the link here to my social media account since this is a demo page i'll leave it as is and then i can change the background color of this facebook icon so dv automatically set the brand color for facebook the dark blue and the light blue for twitter and the pink one for instagram etc so i will change the background to transparent by clicking this icon and we want to have another hover color for the background and i think you recognize this process i hover the background settings and i click the hover icon the mouse arrow and i activate the hover state and now i can change to gold looks pretty neat but as you can see there is a small rounded corner here and i want to change that so we have this square a little bit scandinavian minimalistic design so we'll go to the design tab border and we see that there are rounded corners by three pixels so i will set zero pixels and then we have the square logo looks nice so i will go back and now i will actually delete twitter and i will duplicate facebook one two three times we have four facebook icons so i will now go to number two and i will change the social network to linkedin and i will go to background since tv is helpful and adding the brand background color for us i will just remove that i can change the link here and let's change the third one we can add twitter change the background color to transparent and the fine thing is that it remembers our hover color the golden one since we duplicated it before so we don't have to do that again and we have the last one i click the cogwheel and i change the network to instagram there we go and we change the background color and don't forget to change the link to your social network nice i'll save and we could actually have a look this is how it looks now and if i refresh we now have this topper it's not on the top it's on the bottom we're going to fix that but we can see the social media links and that the hover effect works so we go back and we can actually take this one and just drop it in the top so now it's more of a top bar but it's way too much padding in here so let's fix that by dragging and dragging and let's have a look at the row padding as well so i click the cogwheel the green one and go to the design and spacing okay i see that i made a small mistake earlier the default padding is now zero top and bottom for all rows and this happened when we changed the global default settings for sizing to max with 12 1200 pixels earlier and i happened to include the spacing on that row as well that was zero padding top and bottom so let's fix that quickly by going to the preset settings click the pen go to design spacing and change this global setting that all rows should have zero pixels padding i don't want that i just want that on specific rows yes i'm sure and let's save and we go back to this row in the menu design spacing will have zero pixels top padding and bottom padding for that specific row okay and we go back here and we set the sign spacing and we have zero padding top and bottom here as well but i don't want this to be be applied to all rows in our website on the pages as well so that's why i don't want that as a global setting okay we're back in business we also want to add this thin gree grey line as a divider between the top bar and the menu i'll click the cogwheel for this section and design and let's go to border and here we can set the border styles and i can have a border on all four sides so i can just drag this one to add that but now i just want a border to the bottom so i click that and we can choose like three three three maybe and the bottom border width should be not zero pixels but maybe two and there we go a real subtle line looks really nice okay and i want also to change the width of this row because i want the social media links and the buttons to go out to the corners like this up here and this up here so i go to the design tab and sizing and the width should be 100 and the max width should also be 100 because i want the button to be all the way out in the corner when we created and well here i want to make a small adjustment because i want a little bit of spacing to the left for our social media icons so in the design tab i go to spacing and we change the padding to the left to one percent so then we have a small gap there makes the sign looks better okay and we have a final tweak of our social media buttons because they are not really centered align here they are a little bit higher than the middle and now when i try to grab them you can see that they are overlapped because we have so much content in here so first of all let me change my settings in the visual builder by clicking the dots and change that to click mode okay so now i don't have all these overlapping options and now i can click but then when i click i have all these options again and i could find it like that but sometimes it's actually impossible when you have overlapping design and lots of tight elements so one thing you can do then is to choose the wireframe mode down to the left and then you can open the social media module and then go back to desktop and you can edit it or you could open the layer view down to the right so this was introduced a while ago so when i open that i can see all the different elements on the site i can click open all and now i can choose my social media i can see that it's highlighted up to the left and i can click the cogwheel to edit it so this is also a way to find overlapped elements and i will go to the design tab and i will use this time the transform options so this is a way to move around stuff and it's it's really powerful you can turn things around like this and yeah you can do pretty cool effects here but for now i just want to tweak it a little bit and move it a little bit further down so i will click the chain here otherwise it will move both in the x and y axis at the same time like this and i don't want that i just want to to move it up and down so i press 0 and i deactivate the chain and now i can move it freely up and down so let's set it like five pixels down or so so now it will look much better and i will close this one okay we save and now we should add the button to the right corner here so i click the plus button in the second module and we should search for the button module so we click that one and we can choose our button link text go for divi mundo and we can insert a link so here you can type any url like dbmundo.com or you can click the dynamic content icon to choose a page link on your website so i could for example choose the news page like this and we have created an internal link and i can choose the button target or the link target should it be the same window or in a new tab but i'm happy with this one so i go to the design settings and the alignment of this button should be to the right and this text styling we can actually leave for now and go to the button styling and i want to use custom styles for this button i don't want it to have this baby blue color so we'll start by setting the button text and i will use 12 and we will have a button text color that is white we scroll down and the bottom background should be golden so we choose that from our palette the border bottom border color that's the word i'm looking for should also be golden now it starts to look something like the end result i want then we have the button border radius it's kind of rounded like we saw before on the social media icons so i will change that from three to zero to have the square button i could easily say 50 pixels here and we have a really nice round button design but for this minimalistic website i will set a zero border radius i can also add some button letter spacing like two pixels to increase the spacing between the buttons uh sorry between the letters that looks kind of nice and more easy to read and we'll change the button font from the default to carla i will also change the font weight from regular to bold and the button font style should be all caps i want to show a button icon on hover like this and we can actually keep the standard icon there otherwise you can change from a lot of predefined icons here in divi and the button icon color should be white it should be placed in the right and only be shown when hovering okay so we're getting close but i don't want this jumping effect when i hover and i also want the button to have more padding inside so let's fix that by going to the spacing tab and we will add some top and bottom padding so i'll set 9 to top and here's another trick to save some time in divi if i want to have the same bottom padding i can just click this link or chain symbol and it will be synced so we'll have the same top and bottom so if i would increase this one the other one will follow or if i type nine that one will be nine so that's a nice time saver and the right and left padding i'll set to 28 pixels and i will use the same symbol the same feature here okay so if i hover you can see now that it's not jumping the icon there it fits into the bottom so it looks much better okay so i'm happy with my button there and i'll exit and save so let's preview our page here we go i will refresh it and now we can see that we actually have the top bar and we have the button and if i scroll the top bar disappears and the main menu shrinks and is sticky so this is a pretty nice menu i think and you can actually download this design this layout as a json file you'll find the link in the description below the video so one more thing that's easy to forget is that we want to link the logo to the home page so this is a best practice and it's really easy to achieve we just go to our header our global header in the theme builder and we click the cogwheel for the menu module and we go to the link tab in the content section and logo link url should just be a slash or a shift 7 and we save and we save and now the logo will link to the start page or to the home page wherever you are on the website [Music]

Channel: DiviMundo

Views: 410

Keywords:

Id: wYjzoWERkmk

Length: 35min 37sec (2137 seconds)

Published: Fri Jun 25 2021