Professional Website Creation: Hybrid Sticky Nav With Elementor Pro

if you're looking to create better looking websites and stay with me because today we're going to recreate a beautiful and modern fullscreen navigation with the sole power of elemental pool hello I'm a host casino I'm a digital Alchemist and in this video I'm going to show you how to recreate the beautiful and professional fullscreen navigation of a side of the day nominee on the awards website and as mentioned in the intro we'll do this with elements or pro only in the previous video I covered this similar topic but I was using Astra Pro elements or pro and elements or extras so none of that today since we're only going to use elemental Pro and you'll be able to follow no matter which WordPress theme that you're using now you'll find an affiliate link to elements or pro in the description of this video needless to say that I only recommend elements or pro because I absolutely love it and I use it each and every day to be crystal clear I do get a commission if you purchase elements of Pro through my link but you don't pay anything extra so you don't have to but if you do thank you alright enough talk let's dive in okay so first let's take a look at what we're going to build today so just like in a previous video I went to google and type best navigation websites and I landed on the awards website where they have a showcase of some of the best navigations of either award winners or side of the day nominees so I scrolled down and in the previous video I covered this website here but today we're going to look at this navigation here so this is the website and as you can see it uses a video background now today we will really focus on the navigation that you can see here in the top right corner so if I scroll there's no sticky header but the navigation stays just like in the previous tutorial but this one is a little bit different and as I mentioned today we're only going to use elemental Pro so if I take a look I open there's a nice animation now we're not necessarily going to recreate all of that but I just want to show you how to create this behavior with Elementor pro so if we look at the mobile version on the mobile mobile version stops here a roughly 60% of the height of the screen I'll do something a little bit different because I want to use it a full screen with the video but it's pretty easy to do in element or if you want to exactly mimic this website and once again this series is not about merely stealing and copying other people's work but this is about teaching you how to create pretty much anything with elements or pro and also give an inspiration so let's take a look at what I built with this so this is the website as you can see it's a video of Costa Rica let me refresh so you get the initial image so that's what you see first you have an image and then it loads it loads the video you can scroll and as you can see the navigation stays here on top and if I click on the menu I have a nice animation sliding down and when I close it slides back up let's take a look at the tablet version so this is the tablet version so once again you can scroll and you can still see the navigation on top here and you also get the same nice animation and we're gonna check the same thing with the mobile version so once again you can scroll and the nice animation for the fullscreen nav now to achieve that as mentioned we're going to use Elementor Pro now you could probably get away and try to replicate it with free add-ons or free plug-ins but today I'm really going to focus on how to do it with elements or pro now if you're using Elementor and didn't get the pro version that you may be wondering yeah what's the big deal with the elemental pro well first of all the price thing isn't that much it's if you have one website it's going to be 49 bucks or a year and if your website is making you money that's a no-brainer and even if it's just a website doesn't not necessarily bringing back but you really want to have a nice website maybe for a personal project what's 49 bucks a year come on now of course I can imagine that in some countries $49 may be a lot of money and in that case I always give that advice try to make some money first and then when you make your money back come and get Elementor probe $99 for three sites per year in 199 for 8,000 websites and basically what this does compared to the free version of Elementor is you get additional widgets you get about 58 advanced widgets you get the team builder features and death to me that's the most important thing you also get the pop-up builder and we're going to use that today you get the visual form builder as well as popular marketing integrations which is really handy if you're doing digital marketing and last but not least you also get the WooCommerce builder dynamic content and custom fields capabilities as well as motion effects like parallax and mouse effects so to me it's really worth it ok let's move on to what we're going to build so this is what we're gonna start from so I'm using the Astra theme but you can use pretty much anything because this is going to go away in a few moments and I've already prepared the homepage but there's no video background and no image yet and we'll take care of that in a moment so let's go into the wordpress dashboard and the first thing you want to do is go to appearance menus and you want to create a menu now I've already created a menu with the homepage and the rest are fake links so it doesn't really matter what you put in the menu just make sure you have a few items 5 minimum in the in the menu click the primary menu give it a name and then save your menu ok so now the next thing you want to do you want to go to templates pop-ups and here we're going to create our first pop-up so make sure you select pop-up in the drop down and we're going to call it full screen menu so let's click on create templates okay so you can either choose a template but we're not going to choose that so let's just close this window and that's it we're in the pop-up settings so the first thing you want to do is change the width to 100 V W then for the height you want to select custom select V H and put 800 VH okay so it's full screen the content position should be at the center position horizontal and vertical Center the overlay we don't need any overlay so I'm just going to close that the entrance animation should be the sliding down and the exit animation should be the slide out up that's the one and actually the animation duration should be 0.4 so it's way faster okay general settings nothing here so let's move on to the style tab okay so first we want to select a background type we're going to select the classic and as a color are we going to select black okay next we want to choose a color for or our close button so I'm just going to select a red so it's going to be PC BC 0 0 0 and by the way I'm just going to show you how you can put this color in the default color so click here on the top left nav akan click on color picker and then we're going to change this color here and paste our main color which is BC zero zero zero zero click on apply and now you'll be able to use it on all pages in Elementor ok so let's go back to our popup settings and for that I click on them the little gear icon in the the bottom left corner okay so we're back back into style close button so we already chose a color and for the size let's choose 35 so it's bigger as you can see here so let's publish our work so it's saved so we're going to add a condition we want to show this on the entire website and then we're not going to touch the triggers and the advanced rules okay usually I do that at the end but a good habit is to save your work frequently even though there are some automatic save so but I always prefer doing that okay so now we're back in the pop-up settings the next thing we want to do is to add a widget so I think here on the icon for the widget library and I'm going to type nav menu so here is my nav menu so by default it will select the only menu we can find which is the main menu if you add several menus then this is where you you will need to choose the menu you want to show here so we want to change the layout to vertical we want to align it in the center the pointer we don't want any pointer so I'm just going to select none next we want to change the alignment of the mobile drop-down to the center will take care of that later but let's set it right now the toggle button we don't want any okay so now let's move into the style tab so we have two drop downs here main menu and drop down so for the desktop version we're going to play with the main menu options so first of all on in the normal state the text color should be white okay and we're going to change the typography so click on the typography icon and as a phone we are going to select montserrat font let's give it a 40 pixels size of 40 so we want to transform it to uppercase and we want to give it a letter spacing of - okay and we also want to give it a vertical padding of 30 okay next the hover States so click on hover the text color should be our red color or you can choose pretty much any color you want but for the sake of this tutorial this is the color we are going to use so when you hover over it you can see which one you're hovering over and for the active we're going to select the same red color okay so once again let's save our work okay now let's move on to the tablet version so I'm just going to select tablet here in the bottle of bottom left corner of the window and for the tablet and mobile version we're going to play with the drop down settings so once again we're going to change the color so for the background color make sure you reduce the opacity of whatever color is in there because we don't want anything behind for the text color we're going to select white now for the hover States once again we want to drag the opacity down for the background and the text color should be red now you may be saying why would you need hover features on a tablet or on a mobile because its touch right well it is but if you're using a smart phone like the Samsung Note then you have a stylus so with the stylus you can actually hover over elements and the same goes for the iPad iPad pro or other tablets where you can use styluses okay so that being said let's move to the active tab once again we're going to produce the opacity of the background and select our theme accent color okay next we're going to play with the typography so once again it's going to be montserrat google font size should be 30 pixels and we want to transform it to uppercase okay and I forgot the letter spacing should be too awesome okay and we want to give it a vertical padding of 20 okay now let's move on to the mobile version so let's switch to mobile make sure you're on the normal tab and for that we're going to change the typography so it's still monserrate but let's make sure yet it's 30 for the rest we still have letter spacing of two and we're actually going to change the vertical padding to 20 okay so let's click on update and we're pretty much set for navigation okay so now the next step is to go back to the wordpress dashboard then go to templates team builder and as you can see I've already created a footer and if we go back to the front-end this is our footer right here at the bottom okay so now let's go back into the team builder okay so click on add new select header and as you may have guessed we're going to call it header so click on create template and once again we can either choose a template or create a new one we're going to create a new one so you can close that and we're going to create a new section the new each section should be three columns okay so first make sure you click on the icon to change the options of the section and first of all we're gonna make it full width okay the Heights we're going to select a minimum height of 65 pixels and we're going to the Advanced tab give it a zero margin zero padding okay now let's move on to the first column so click on the first column go to advanced and same thing give it a margin of zero and padding of zero and what once if you've done that I'm just going to right click on the column copy the column and then hover over the second column and I'm going to right-click and choose the paste option and why do I do that just because I'm lazy and I don't want to retype the zero margin and the zero padding so I'm just gonna do the same thing for the third column and there you go okay next make sure you select the main section go to the Advanced tab and we're going to give it a Z index of 100 and actually we do that because we want the header to always be on top of whatever else is under that Z index on the page and you make more sense later okay so once we've done that we're going to change the proportion here of the columns the width of the column so click on the first column go to the first tab which is the Layout tab and we're going to give it a 10% width next for a second column we're going to give the 80% width and the rest is for the third column so once you've done that go to the widgets library and we're going to add an image so I'm just going to actually I'm going to use the site logo because I'm using Astra but so if you're using a different theme you can just drag an image and add your logo now most websites almost theme sorry this should be compatible with Elementor so I'm just going to drag the site logo here okay and as you can see right out of the bat it's exactly where I want it so that's great okay next we're not going to put anything in that middle column actually I could have only two columns and play with the margins and the padding I found it easier to do it that way okay so next in the third column I want to add an icon and for that I'm going to go to the widgets library type I can and actually I'm going to select the icon box so I'm just going to drag the icon box right here and first I'm going to change the title to the word menu I'm going to remove the description and I'm going to change the icon so I'm just going to type lines and I'm going to use the crepe lines I can so click on insert okay next I want to select the icon position so the icon should be on the right-hand side so I'm just going to click on rights and there you go fine next click on style and as the primary color we're going to use white but before we do that because if we do that now you're not going to see anything so let's move on to the third tab the Advanced tab background the background type should be classic and we're going to select black as the background okay once you've done that click on on the style tab and as a primary color we're going to choose white the spacing should be zero or just fine at this point the size should be 28 pixels and for the hover States as a primary color we're going to select F 2 F 2 F 2 so when you hover over it it's really subtle you want to reseed here because it's really small but it will work out so back to the icon so that's fine and next for the content we want to align in the center and vertical line in the middle and for the typography we're going to use once again monster rats with a size of 14 pixels uppercase and the letter spacing should be 1 this time okay next yep forgot to change the color for the title so I'm just going to change it whites there you go okay and the last step we move back to the Advanced tab give it a zero margin and we're going to give it so 20 pixels top right bottom and we want to change the left so we're going to click on them the the chain icon to and link the values and just give it a ten pixels on the left okay so let's publish that to say what work so as a condition we want to add this on the entire website so I'm just going to save and close and I don't know if you can see because you might be small on your screen but this I need a gap here and this seems to be a bug because if I go back to the section I have 0 margin:0 padding:0 gap so if I move on back to the third column also have 0 margin:0 padding:0 a bug and there's an easy fix so I'm just going to duplicate the third column then I'm going to remove that one here ok and then I'm just going to play with the width the width of the column so this one is 10% the second column should be around 80 percent or even 81 percent it really depends you really need to play with it and there you go the product is fixed so just click on update so next what you want to do is make sure that that I can and the menu here stays sticky so for that make sure you select the icon box go to advanced then go to motion effects and for sticky select top so we can't really test it right now but we'll test it in a moment okay just make sure you do that okay so it's looking fine on the desktop now let's move on to the tablet mode so let's go into the tablet mode and we're going to change the proportions so the first column should be 25% and if you can select the columns you can also select in the Navigator so the second column should be 59% and our third column should be 16% okay so let's update to save our work and let's refresh the page back into the tablet mode and as you can see it's working fine so before we save then refresh the page it actually looked like it was cut but it's not so a good rule of thumb is when you see some weird things happening just save and refresh the page now let's move on to the mobile mode so mobile mode and as you can see it's it's having a different behavior and when you're in mobile node is apparently unless I've missed it no way you can actually remove the the menu label but you can do it but if you do it you do for each version so if you remove it and you go back in tablet mode it's gone you go back in that somebody it's gone and we don't want that so let's put our menu label back so and there's no option to actually just remove the label here in the in the options so the only way to do that is with CSS but don't panic is really easy and actually I'm going to put the code on the companion blog post so all you have to do is click on the link in the description if you're watching this on youtube or somewhere else if you're already on my website just look at the companion blog post and just copy and paste the code as I'm going to show you so before we copy and paste the code the first thing you want to do is make sure you have the action box selected go to the Advanced tab and we're going to give it an eye and that ID is going to be my - Navigon just make sure you're right it is padded like that okay next we want to click on the little gear icon at the bottom left corner of the window and we do that to go into the settings so once we are in the header settings go to advanced custom CSS and I'm just going to paste the code and once again you can find that code on the companion blog post okay and as you can see the word label the the menu label has disappeared so once again all you have to do is copy and paste now I've copied it here you could also copy it somewhere else for example I use the Astrid theme and there's a spot where I can paste all the additional CSS code so that it's neat it's easier to maintain so it's really up to you maybe you use a plug-in I don't know what you're using but either you can paste it here in elements or pro or somewhere else on your website so once you've done that make sure you click on update okay next before we move further make sure you select our section go to the Layout tab and for the height for the mobile version we want a minimum height of 55 pixels okay next for the columns the first column should be 45% or the window the second column should be 40% and the third column should be 15% okay next we want to select or our icon box and we want to go to the Advanced tab so we're gonna change the padding value so first I'm going to unlink the value and I'm going to put 13 pixels top 9 pixels right 4 pixels at the bottom and 9 pixels on the left-hand side now you can see anything right now and it's normal so let's just go back to the style tab for the icon we want to use the spacing of seven make sure our primary color is white and once again you see that bug where we don't see anything here so I'm just going to click on updates refresh our page and go back into mobile mode and as you can see it's looking perfectly rights and the same thing happened a few minutes ago so you might have to play with this because it's not really in the in the center here so let me click back on the icon box let me go back to the padding and here you have to play really with the with the values so so let me use 16:9 one and nine it looks a little bit better okay and if I look at a preview yeah looks better like that in my opinion okay so there's one last thing we need to do here so let's go back into our desktop mode it's a bit easier to see okay so make sure you select the icon box go to the content tab and here where it says link you can see dynam here click on dynamic then select pop-up and then once you've selected pop-up click on the little wrench icon and we're going to look for our pop-up which was full screen menu and now we can click on update and now when you click there you go here's a navigation so that's going to preview mode and that's working perfectly fine great so we have one last step for this tutorial and for that we need to go into the WordPress dashboard pages make sure you create one page I've called it home and then click on edit with Elementor okay so I've already prepared that page so there's only a title so if you wondering this is the animated headline with the style rotating animation it's slide down and I've put three words in here and then for the style I'm using let me see I'm using the montserrat fonts at 100 pixels okay and here I'm using a divider and that divider has a width of 250 pixels and style is white the weight is 6 and the gap is 15 and I've just duplicated that divider and place it here just below the animated headline okay so first of all you want to select the section go into the style tab and we're going to select our background image fallback so click on the icon and then select your image I've already added an image an image but if you if you're just following along you can just drag and drop an image in here so click on insert media so this is the image that people are going to see before the video load so if there is any if they have an issue and the video can't load they will see that image and even if they have no issue that we first see the image while the video is loading ok next you want to go into the background type make sure you select the the background video which we should already be the case and just put in a link and if you're curious this is not one of my videos I just wanted to youtube I typed 4k and one of the first videos that came up was Costa Rica in 4k so very very beautiful video and I'm just using it for the demo purposes okay so here I've pasted the video but of course I do recommend you use your own videos if you used it if you're using these for production and I've already selected the start time which start at 104 seconds which is and 44 seconds and you could also select an endtime which I'm not going to do here so let's just say what work to be sure so that's already looking much much better but we still have an issue we still have that white space here that we do not want we want the logo and the menu to be over just like an address transparent header okay so for that select the section here go to the layout make sure you've selected a minimum heights of 100 VH you could even trick because you can really go further here more than 100 but you could type 105 so we make sure that he actually goes below the default but right now I'm just gonna keep it at 100 100 VH for a moment then move on to the Advanced tab and make sure you unlink the the margin values type 100 actually now I'm going to type 77 and then I'm just going to put a minus in front of the 77 and then you can play with your keyboard and change the value to see up to where you have to go so if you recall the heights of the header let's go back here was 65 pixels so I've tried with 65 pixels but when I do for some reason there's still a little bit of gap so I'm just going to play with the values and actually here to stop at 71 - 71 or except for me you might have to play with the values in a little bit so just click on update okay and now let's go back and let's refresh our page okay it's looking good but we still have that little value so a little white space here so let's go back and actually I'm just going to move it to 77 okay so let me refresh and it's looking great so let me try that okay so once you've done that make sure that it looks good on the tablet also I've already made the changes to the the title and here on the under mobile also once you're happy with it you can just get out of this window okay so now let's go back to the front end and let's try our tablet version as you can see we can scroll you can still see the menu here and if I click add the beautiful navigation sliding down and sliding back up and I can actually test the mobile version so I'm just going to refresh okay once again I can scroll and I still have my sticky navigation here and if I click beautiful beautiful nav okay so once again let's go back to the desktop version and the same behavior we can scroll and you can still see the menu and the nav akan and once you click on it you have this beautiful beautiful animation so as you can see it's a pretty simple tutorial but it's really really powerful actually I can see a lot of projects where I could use that because I kind of see it as a trend you know before it used to be there was nothing once you scroll the website you have to go all the way back up to get the navigation then we have the sticky headers but I think with the sticky headers it's fun when you're on a 27-inch screen or even a 21 but when you are on a 13-inch screen which is really popular with the MacBook Airs and MacBook Pros and stuff it's a lot of real estate actually to keep a sticky header in my opinion so I like the fact to declutter the the header and actually be able to scroll always see the the menu here and okay I don't see the logo here some people may want to have the logo which I can understand for branding purposes but you could pretty much achieve the same thing just like I've shown you instead of placing the stickiness here on the on the icon box you could place the stickiness option on the whole section and then you you would have the logo here I mean there are different ways to achieve it but I really found it beautiful it makes it really minimal and if you know anything about me you know that I love minimalism and I really hope you enjoyed this tutorial and I can't wait to see what you're going to come up with now if you're interested in purchasing elements or pro as mentioned at the beginning of this video you'll find an affiliate link in the description of this video so I hope that this tutorial has shown you how to create a beautiful and modern fullscreen navigation for your current or for your next WordPress website now there are other wordpress or elemental tutorials that you'd like me to cover please let me know in the comments and by the way you find the companion blog post on my website casino comm and of course the direct link is in the description of this video now if you enjoyed this video please like it as it really helps growing this channel I can't stress this enough and if you know someone that could benefit from it please share it now if you're not yet a subscriber and that would mean the world to me please don't forget to subscribe to my channel and smash the notification bar so that you don't miss anything now if you want a brand market and grow business in the digital age then make sure you subscribe to my email newsletter so that you never miss the share of digital alchemy as well as tips tools services and case studies that can help you grow your business online so that's it for this video I hope to see you around and in the meantime don't forget to invest well success [Music] [Music]

Channel: Kaycinho The Digital Alchemist

Views: 6,872

Keywords: professional website creation, professional website design elementor, professional website design elementor pro, professional website design tutorial, professional website design wordpress, website design, build a website, create a wordpress website, wordpress website, elementor pro, web design, wordpress tutorial, sticky menu elementor pro, sticky menu wordpress, fullscreen navigation, how to create a menu with elementor pro

Id: -jdM3Ma6Qac

Length: 37min 26sec (2246 seconds)

Published: Tue Sep 17 2019