How To Create A Transparent Header Menu In Wordpress With Elementor Pro

in this video i'm going to show you how to recreate the home page and modern semi-transparent full screen navigation of an award-winning website with the power of elementor pro hello i'm your host casino from casino.com i'm the digital alchemist and before we get started just know that the idea here is to show you how to recreate an award-winning design so that you can understand how limitless you are with elementor pro oh and by the way you find the timestamps of the various parts of this tutorial in the description below now if you want to level up your game and create professional websites for which you can ask more money make sure you watch till the end now you may find that this video is long but hey you don't create professional stuff in 5 minutes now of course the idea is to give you the how-to so that you can build your own version in the future and who knows yours may be even better but let's give credit where it's due and the designer of this beautiful website have done an outstanding job so are you ready so let's move to the computer okay so first of all let's take a look at what we're going to build so this is the novi website and as you can see we have a beautiful video background now it may seem a bit choppy because i have so many tabs open but it's really smooth actually when you have a regular use so as you can see when i hover over the sections here i have an overlay and when i click on the menu i have this beautiful and sleek transparent navigation that slides in with some subtle animations so let me close that back and there you go and this is our version this is what we're going to build today and as you can see you want to hover over the blocks we have the same overlay feature and when i click on the menu we have our beautiful semi-transparent navigation with some subtle animations and just like the original mobile version on the website we are of course going to build our own now in order to recreate this beautiful home page and seek navigation we need a bunch of free tools as well as a premium one and you may have guessed it it's elementor pro which i've recommended time and time again on this channel in terms of pricing it starts at 49 bucks per year for one website up to 199 for 1000 websites which in my opinion is the best bang for your buck so if you're interested you find the link in the description below now this is an affiliate link so it means that i do get a commission if you purchase after clicking on my link but i only recommend elementor pro because i love this tool and use it every day and in turn commissions help me support this channel and keep on creating free content okay this is what we're going to start with so we'd better get to work step one prerequisites so the first thing you want to do is install a wordpress theme so go to appearance themes and you install anything you want but i suggest you install astra the free version which i've used for this tutorial so you have to do is click on add new and then type astra and then just click on install and then activate next we want to install some plugins so for that go to plugins add new and i've already installed the plugin so we go a little bit faster so basically i've installed elementor elementor add-on elements and elementor pro so it's the same principle you click on add new and for elementor you just type elementor and same thing for elementor add-on elements the only difference is for elementor pro which you need to install with the zip file so for that let me show you just click on add new then click on upload plugin choose file and just add the zip file now once you've installed and activated all plugins you will see elementor add-ons element here on the left hand side so just click on that okay so by default all options are activated we want to click on each option to deactivate it the only one you want to keep is this one here wrapper link okay so once you get that click on save changes okay next we want to add a menu so for that i already created a few pages and then go to appearance menus and as you can see here i've already created a menu so i named it main menu i took the primary menu option here and i added all the pages so if you want to mimic what i'm doing in this tutorial you can just create home services stories team and contact but don't worry about it because we're not going to build those pages we're only going to build the home page and the navigation so once you're happy click on save menu and next let's go to pages so click on all pages and like i mentioned i've already created a bunch of pages so if you're starting fresh just click on add new and create the home page i'm just going to click on edit okay and give it a name so i called it home and because we're using astra i can disable the title here um in the sidebar so tick disable title then click on update okay and next you can click on edit with elementor okay and the first thing we're going to do is to open the navigator here at the bottom so click on the icon so this is what happens when you click you get the navigator here or you can use command i on a mac or control plus i i guess on a pc on a windows pc or linux pc okay so with the navigator open we can get started so first i'm going to click on the plus sign here and select the structure with three columns okay next i'm going to change the settings here on the left hand side so it's going to be full width the height is going to be a minimum height of 100 vh the column position is stretch okay next i can move on to the style tab so i'm going to click on background and i'm going to click on classic then i'm going to choose an image i've already added a few images you only need one big image basically and a logo so i'm just going to add my image okay so this is going to be my background image repeat no repeat and i want to set this to cover next i click on background overlay and then click on classic and i'm going to add a color so you can add any color you want but basically if you want to use the same colors you can pause this video and write down those colors here so i'm going to use the first one primary okay and the opacity is going to be 0.5 so if i make this higher you can see anything so i'm going to keep it at 0.5 okay next we want to add some css code now don't worry you're not going to have to code i will put all the code in the companion blog post and you find the link in the description below but basically there are many places you can add css code so we're going to add it at page level so for that click on the gear icon here at the bottom left corner where it says settings i'm just going to click on that then go to the advanced tab and here you have custom css i'm just going to paste the code so if you take a look here we have one block here and one block here and one block here and one block here and when it goes into responsive mode the system has to know how to behave and basically that's what we're doing with this code so we have a class called my main and a class called my secondary so my main is going to be the first column here and the secondary are going to be the blocks but you understand better in a moment so we have various code for the tablet for the mobile and for the desktop for the time being just copy and paste it here and in order to keep things organized what i like to do in the navigator i like to double click on the name of the section and i'm just going to put a reminder that css is at page level so that at least i know what's going on and when i'm trying to look for code i don't have to look everywhere because basically you can add css code in pretty much any widget any element so i like to put where my css code is so at least i know so click on update to save your work okay so now we can start working on our columns so here in the navigator i'm just going to expand the section here and as my three columns i'm going to select column one and actually i'm going to rename all the columns so that's going to be column one then double click column two and the third one is going to be column four and you'll understand why in a moment so let me select column 1 and then i can start styling it so where it says vertical align i'm going to select middle okay next for the style tab there's nothing to change let's go to the advanced tab and in terms of padding i'm going to put 100 pixels everywhere but then i'm going to unlink the values and just change the left value to 160. okay let me update my work next i want to add a class called my main if you recall this is the class for the first column that we added in the css so make sure you write it exactly like that my dash main next click on the widgets icon here at the top okay and we're going to drag a heading so let me drag it here in the middle and i'm just going to change the text to something else now of course you can write whatever you want there's going to be an h1 then i go to the style tab i want to use white color and in terms of typography i'm using roboto the size is going to be 45 pixels and the weight is going to be 300. okay let me update okay next let's take care of our column number two so i'm going to click on column number two here in the navigator and then i can move on to the style tab then border i'm going to select a solid border next i click on unlink the values and i'm going to use zero top one on the right zero at the bottom and one on the left and in terms of color i'm going to select white but then i'm going to drag the opacity more or less in the middle okay next i can move on to the advanced tab and i'm just going to add a zero padding on all sides next once again i'm going to click on the widgets icon here at the top left and i'm going to drag an inner section right here okay so first of all let me change the content width to full width then i can go to the advanced tab and i'm just going to unlink the margin value so it's going to give it a zero top and bottom margin and which is what i want next i'm going to right click on the second column and i'm just going to delete it because we don't need it next i want to select the column within my inner section so let me just pause here i know it's not the best practice to have a column and an intersection and some more columns but in order to achieve this type of layout it's really complex so either you can do it all with css or javascript but if you want to do it with elementor pro only this is the way i found to do it okay so with that out of the way let's make sure we select our column here and if you want to be sure you select the right element we can look here in the navigator so i got my column number two which is this one and within the column i have an intersection and within that intersection i have a column which is this one here so the first thing i want to do is change the vertical align to bottom and next i want to go to the advanced tab and i'm going to add a css class and that class is going to be my secondary and now you understand why we use that css code in a previous step now it's half the page the next thing we want to do is to add some padding so we're going to add a 50 pixels padding all around next i want to add a button so once again i click on the widgets icon i'm going to drag a button here and i'm going to call it services because this is the first page and of course i would add a link you can add the link to the page but we don't really need it here okay next let me move on to the style tab and the first thing i want to do is click on the background color and i'm going to drag the opacity all the way down so we can see what is in the button and next i click on typography and where it says transform i'm going to click on uppercase okay next let me click on the hover and where it says hover animation i'm going to add a float animation so as you can see now it looks better you know it's a button at least next i want to select my column so once again i'm going to check here in the navigator and i'm going to click on the column then i'll move on to the style tab so the first thing you need to do is click on background and we're just going to click on classic but we're not going to add anything now why do we do that if we don't do that there's no tab called background overlay and we need that so once again click on classic where it says background and now as you can see we have a tab called background overlay so let me click on background overlay and then when it's normal i'm just going to give it any color and drag the opacity all the way down and then click on the hover tab click on classic and now choose the color you want to use i'm going to use that blue color here and the opacity is set at 0.5 by default so now when i hover over uh the block as you can see there's a difference in color which is what we wanted and the last thing we want to do with this column is still here in the style tab we have the elementor add-ons plug-in wrapper link so click on enable link and then you can add and any link i'm just going to put the on the pound sign but of course you can just type the name of the page you want to add and now i want to hover over the blog you can see the pointer changes it's a link so you can click on the column so you can click either on the button or on the column okay so now that we have our inner section working the way we want we can just right click on the inner section in the navigator and i'm just going to duplicate now in order to be able to follow i'm just going to rename those sections so this one is going to be intersection one and this one is going to be inner section two so let me select inner section one here and now i can go to the style tab go to border and i'm going to add a solid border let me unlink the value and it's going to be zero top zero right one at the bottom and zero left and for the color once again we're going to use the white color and then drag the opacity more or less in the middle and now let me select inner section two let's go to the style tab and let's repeat the operation with a slight difference so select solid but then i'm going to put a zero on all sides now you may be asking why put zero on all sides well because we're going to use some of those values for the responsive part so tablet and the mobile and you want to be sure that there's a zero border on the desktop mode okay so now if i scroll down we can see we have our two blocks here and if i want to see a preview so this is what we want now of course we will get rid of this header here we have a transparent header but for the time being that's the way it goes so let's go back and now that our column is working and ready we can just so let me collapse this i'm just going to right click on column number two and click on duplicate then i'm going to double click on the duplicate and change name to column three and now you understand why we skipped column number three so that it goes a little bit faster so with our column number three selected here in the navigator let's go to the style tab then border and we're just going to change the values here so it's going to be zero on the top one on the right zero at the bottom and zero on the left hand side and for the rest it stays the same so let's click on update okay now we can resize our columns so let me drag the columns all the way to the right hand side and the first column is going to be 50 of width the second column should be 20.5 now you may play with these values but this is what i found worked best and the second should be also 20 20 uh 0.5 okay once again let's update to save our work okay so now if you look we have all the blocks here but there are some things we need to change now as you can see we have the same buttons over here and if you put some links on the columns you go to the same place so one thing you should do is to start changing things so first let me select the the bottom button here i'm going to call it team and then i would change the link here and then the next thing i would do is i would select the column so this is column number two intersection number two if you're still following and the column within is this one so i would go to style um the wrapper link and i would change the link now do this for the third one also and then there's a slight difference for the fourth one so for the fourth one we actually want to get rid of the button so we're going to click on the widgets icon here on top and i'm just going to look for a block quote so let me type block quotes and i'm just going to drag the block code here on top of the button i can remove the button so i'm just going to delete it and with the block code selected i can start styling it so i'm just going to put some random lorem ipsum text here author is going to be twitter the view is going to be icon only next i move to the style tab so the text color is going to be white same for the author now the button is going to be a size of two i want to use a custom color so the background color is going to be white and the text color is going to be blue let me click on updates and yeah i forgot the border so the border width should be zero okay so looking good so let's take a look at what we started with let's refresh the page and there you go so it's starting to take shape starting to look good now if you look at the bottom of the page you will see a custom footer now i've already done that before starting the tutorial because this tutorial is long enough so i'm not going to spend time on this i've already covered that in other tutorials okay now let's take care of the tablet mode so i'm just going to click on the responsive mode button here let's move on to the tablet mode okay so it's looking pretty messy so let me collapse everything here so that it's neat let me click on the column number one go to the layout tab and i'm going to give it a width of 100 then column two layouts 50 column three layout fifty percent and column four which we're not going to use uh um on the tablet mobile version but i'm still going to give it a 100 width then move on to the advanced tab responsive and i'm going to hide on tablet and hide on the mobile and now if you take a look this is what we have so it's starting to take shape we just need to take care of the borders here but before we do that let's go back to elementor click on column number one and where it says vertical align on the layout tab i'm going to select bottom okay and next click on advanced and i'm going to give it a padding of 50 pixels next i want to select my text here typography and i'm going to give it a size of 38 pixels of course you can play with the values that suit you best click on update to save our work next let's take care of column number two so let me collapse that click on column number two in the navigator then move on to the style tab border so we still have a solid border we're going to give it 0 everywhere then unlink the value and just add a one pixel to the right so one pixel border to the right and the color stays the same next i want to expand column number two click on inner section number one go to the style tab border and same thing so zero everywhere and then i'm going to unlink the values and i'm going to give you the top uh border of one and the bottom border of one so one zero one zero and we're going to click on inner section two go to the style tab border you know the drill now zero everywhere and link the values and it's going to be zero zero and then one for the bottom so one border for the bottom and zero and we want to repeat the same operation for column number three so let me collapse column two go to column three style border zero everywhere and link the values and add one pixel to the right and then select intersection one of column three style tab border zero ending the values one pixel border at the top one at the bottom and then intersection number two of column three style border zero ending the values and one pixel border at the bottom and now if you take a look as you can see it looks much much better but i can see i have a dark dark line here so we forgot to put some color so let me go back and as you can see here we forgot to put the color so i'm just just going to add the white color and then drag it more or less in the middle let me copy this so that's for inner section number two of column three and we need to do the same for intersection two of column two if you're still following and if you don't just pause the video and look at the screen basically intersection number two style border and as you can see we forgot to put the color so as usual we want to put the opacity in the middle okay and now if i take a look it's looking much much better okay so let's go back now we need to take care of the padding here of the various elements so we need to select each column within the intersection so this is intersection one with only one column and go to advanced i'm just going to put 0 ending the value and then i want 20 pixels at the bottom and 40 pixels on the left hand side and we're going to do that for each column so 0 20 and 40 0 20 40. and for this one it's going to be a bit different so it's going to be 20 all around but then i'm going to ending the value and put a 0 at the top here okay so let's take a look and it's looking good let's go back let me update save my work and now let's take care of the mobile version so click on the responsive mode go to mobile and select the column double check here in the navigator so column number one then go to the advanced tab and i want to give it a 20 pixel all around and then i'm going to select the text and change the typography it's going to be 24 pixels and where it says line height i'm going to set it select pixels and then type 35 next i want to select column number two so once again i double check here in the navigator so it's a column within the intersection so with that column selected let's go to the layout tab and vertical line in the middle okay and next we want to go to advanced and we're going to put a padding of 0 and link the values and give the left one 20 pixels now you want to do the same thing for all columns so click on this column go to layout vertical align middle then advanced padding so i'm going to ending the values 20 pixels on the left same for the third one layouts vertical line middle advanced unlink the values and then 20 pixels on the left and the last one here is going to be a bit different so let me select that column go to layout vertical line middle advanced and this one is going to be 20 pixels all around so let's save our work and let's take a look okay so in terms of spacing it's looking good let's go back let me select the block quote and i'm just going to change the size of the text so let's try 12. and then in terms of line height let's try 18 pixels okay yep looking good now we need to take care of some of the borders here so let's go back now let's collapse everything in the navigator here so everything is clean let's select column number two next let's go to the style tab border and our border is going to be 0 all around next let's expand the column click on intersection 1 style tab border and this time let's type 0 everywhere and link the values and give it a one top border and let's do the same thing for intersection two so in the section two border unlink the values and one for the top okay next we want to select column number three so what column level style tab border and once again zero everywhere then let's expand this click on inner section one border and link the values and it's going to be one top border and the rest is zero and then slightly different for in section number two style tab border and link the value and this time is going to be one pixel border at the top zero right one at the bottom and zero on the left hand side let's click on update to save our work and let's take a look and as you can see it's looking beautiful step three the full screen navigation so within the dashboard go to templates pop-ups click on add a new pop-up and i'm gonna call it pop-up full screen nav click on create template okay but we don't want any of this so i'm just going to close it and i'm going to add a section with one column so first of all i want to be full with i want the heights to be a minimum height of 100 vh i want the composition to be stretched okay so that was for the section but now we need to take care of the pop-up settings so for that we go to the bottom left corner and click on the gear icon so click on settings and we want to give it a width of 100 vw we want the height to be custom and we want it to be 100 vh content position should be top position horizontal position center and vertical in center also over overlay we can leave it but we don't want the close button because we're going to add our own entrance animation we want sliding right and we want slide out rights as an exit animation we leave the animation duration at 1.2 by default next we move on to the style tab and then click on background type classic and let's add a color so i'm just going to select a color and i'm going to actually drag the opacity a little bit below um the middle but you need to play with those values depending on the color you're using and the image you have behind but i find this to work pretty much fine okay so as you can see now it's semi-transparent which is what we wanted okay next move on to the advanced tab and we want to give it a padding of zero and now let's use the navigator so we have our column actually let's right click and duplicate this column so once again i'm going to name it column number one and column number two so let's click on column number one then go to advanced give it 70 pixels all around unlink the values then it's going to be 70 90 70 and 160 for the first column then select the second column and go to the advanced tab at 70 and link the values and it's going to be 70 60 17 90. so now we can start adding the items to the columns so let's take a look at our example so this is the pop-up we want to achieve and we have two columns here and you can see we have a logo we have some text we have some social icons and then we have some mention here at the bottom so let's do this so first of all let's drag an image we're going to style all of that later and go back to the widgets and then we have a text editor next let's go back let me type social and we got social icons here i can put here at the bottom and then we're going to add a button so i'm just going to drag it here so these are our elements that we're going to start in a moment but now let's take a look at the right hand side so we have a button here we have a navigation here and we get some text here actually it's a list so once again let me drag a button so i'm going to drag a button here next i want to drag a navigation menu so i tap nav nav menu i'm just going to drag it here at the bottom and then we want to add a list so let's type this it's a nikon list so once again i'm going to drag it now as you can see if you look at the model it's evenly spaced if you look at this vertically i mean so let's go back and with the navigator once again i'm going to collapse everything so everything is clean with column one selected let's go back to the layout tab and where it says vertical line you want to select space between and now it's even displaced let's do the same thing for column two layout tab vertical align space between okay so now we can start styling all those elements so first of all let's click on the image click on choose image already added the logo but you can add your own you need to align it to the left and link it to a custom url i'm going to click on dynamic tags and i'm just going to select the site url so that's easier then move on to the style tab and for the specific logo i'm going to select a width of 120 pixels now once again that may differ for you but it's it's important that you keep the same sizes for the full screen navigation and for the header as we'll see in a moment so 120 pixels here okay let's take a look okay good next let's start our text editor so let me click on the edit icon and i'm just going to paste the text here okay and next i want to style it so let me go to style the color is going to be white but at more or less 50 percent okay and before we move on to the next item click on advanced motion effects and then we're going to add a fade in at 1300 milliseconds why 1300 milliseconds well it's 1.3 seconds and if you recall uh for the pop-up when it opens it takes 1.2 seconds and then we want that animation to arrive slightly after so 100 milliseconds after that's why okay next i want to edit my text here which is barely visible so click on the edit icon okay next i'm going to click on the style tab text color should be white but with the opacity more or less in the middle and typography is going to be 16. next let's go to the advanced tab motion effects entrance animation should just be a fade in okay next let's move on to the social icon so let me select the social icons i'm just going to change this all around it doesn't it's not really important but just for the sake of this tutorial okay i want the shape to be circle the alignment should be on the left hand side then let's move to the style tab i want custom colors so the primary color is going to be any color but just drag the opacity all the way down the secondary color should be white but once again with the opacity in the middle next we want to add a solid border of one pixel all around and we want the same whites but with the opacity in the middle okay and now when you click on the icon hover we want to change this to white for the primary color white for the border color and for the secondary color we're just going to select a blue color so now we hover over the elements you can see that you can interact with it okay next move on to the advanced tab motion effects and once again we want a fade in okay last but not least let's select our button and i'm going to just type created by or whatever you want to write then of course you can put a link i want this to be aligned on the left hand side i don't want any icon so now let's move on to the style tab so first of all i'm going to get rid of the background so i'm going to drag the opacity all the way down next click on typography and the size is going to be 12 pixels at 300 in terms of weight next i'm going to unlink the value so we get 0 pixels everywhere so let me click on publish to save my work so the first time you click on publish it's asking you where do you want to publish this just click on add conditions include entire site by default click next next save and close no need to do more for the moment okay let's move on to column number two and let's style the items so first of all let's click on our button here then i'm going to align it on the right hand side i'm going to call it menu i want to be small so i'm going to add an icon let me just type close i'm going to select this one of course you can add your own but for the sake of this tutorial we're just going to use that one then icon position should be after at 12 in terms of icon spacing next i want to click on style then as usual i'm going to get rid of the background here then click on the typography we're going to give it 13 pixels at 300 in terms of weight and for the letter spacing let's use three and where it says transform we want to use uppercase and if we go back to the content tab where it says link we want to click on dynamic tags then scroll all the way to pop-up and now you want to click on the wrench icon here and we're going to select close pop-up because that's the behavior we expect when you click on the the x here next move to the advanced tab motion effects and then we want to add a in at 1300 milliseconds and click on update next let's take care of our menu so i'm just going to drag the navigator here let's click on our nav menu and then i can start styling it so it should be vertical we want to align it on the right hand side the pointer should be set to none then the uh align should be aside toggle none then let's move on to the style tab so typography typography should be 21 pixels that's let's say 400 in terms of weight the horizontal padding should be zero next i want to change the color here so it's going to be white but once again we're going to drag the opacity more or less in the middle then move on to the hover tab and now you want it to be completely white and same for the active tab now click on drop down and once again for the text color we want to give it white but drag it in the middle now for the uh background color we want the opacity all the way down however we want white for the text color and the opacity all the way down for the background color and same for the active tab so white for text and transparent for the background and once again horizontal padding should be set to zero okay next move on to the advanced tab motion effects entrance animation we want to add a fade in of 200 milliseconds next let's style our list item so i'm going to get rid of the first two elements click on the third remove the icon and i'm just going to call it legal of course you would put a link to the legal page on your website or gdpr privacy or whatever you want to link to okay so next i click on style i want to align it on the right hand side now uh the icon i don't really care there's no icon here so for the text i'm going to use our white color with the opacity in the middle so let me drag this okay and in terms of typography i'm going to use 12 pixels next click on advanced motion effects fade in and this time with 300 milliseconds delay click on update now let's take a look and yeah it looks good so let's take a look at our example and this is what we've built so that's looking pretty good so now we can take care of the tablet version so let's go back let's go into tablet mode i'm just going to drag the navigator here so that it's clear to work and first of all let's go back to our pop-up settings here at the bottom so i'm just going to click here and just going to make sure that it says default here for both either a default or you just type once again sliding right and slide out right because i've seen some bugs happening and when you don't do that so either default or this okay and actually while we're at it let's do the same for the mobile version so slide in right and slide out right okay so let's go back to our tablet version and let's select column number one so let me close this to make it cleaner select column number one go to advanced and i want to give it a padding of 30 pixels all around and we want to do the same thing for column number two so column number two advanced and 30 pixels okay next i want to select my nav menu here then i want to go to style drop down and this time the horizontal padding should be 40 pixels but if you take a look here it's different because when we look here the text is aligned on the right hand side and if you go into tablet mode it should be here on the right hand side so you can see here the text is aligned to the right and we have also a line here we'll come to that in a moment but if i go back here it looks fine but let's take a look at our example it doesn't look fine even though if you go back to the content we said that it should be aligned to the right and it seems there is a bug so i've come up with some css code so for that just click on the settings here icon here okay then move on to the advanced tab click on custom css and then you can go to the companion blog post copy the css code and of course you'll find the link to this blog post in the description below so copy the code and just paste it here and basically what the code does is try to fix this bug i'm sure it's going to be fixed by itself uh in the future but for the time being this is what i found so basically i'm making sure that it's floated to the right and then it happens the way it should and then i wanted to mimic this so let me show you in the original website uh depending on the page where you are it shows you a line right after the title and that's what i wanted to mimic so basically that's what this code does and takes care of the various sizes responsibly so for the desktop the tablet and the mobile so all you have to do is copy and paste the code and of course feel free to just look through the code if you like that okay now let's take care of the mobile version so in responsive mode go to mobile and first we want to select our first column go to the layout tab give it 100 width but then we're not going to use this column in the mobile mode now we could put it underneath we could reverse the order but um for the sake of this tutorial and following the example we're just going to get rid of this column so go to advanced responsive and hide on mobile now this is how it's going to look actually let me click on the i here so we don't see the first column it's just within elementor it's not changing actually on the front end in order to add on the front end this is what we just did here by clicking on the hide button for hide on mobile okay so now click on column two go to the advanced tab and we're going to give it a 20 pixel padding all around except for for the last one so click on unlink the values and give it zero for the left padding next click on the nav menu here then go to the style tab drop down and this time the horizontal padding should be 25 this is just to leave some spacing so we can add that line that i showed you earlier on after the currently active item in the navigation okay so let's take a look and it's looking good step four creating the header so for that go to templates theme builder and as mentioned already created a footer but that's not the topic of this video which is long enough and now we're going to create a header so depending on when you watch this video maybe you only have the option to use the new theme builder it changed the the aesthetics of how you do it and there are many more options but this is not the focus of this video so i'm just going to click on header click on add a new header and i'm going to call it my header click on create template now we're not going to use any of the pre-made ones so i'm just going to close that click on the plus and i'm going to add a structure with two columns so i want it to be full width and then because we're going to use a transparent header but it's white and white here so for the time being i'm going to go to the style tab background click on classic and i'm going to give it a blue colors just so that we can see what we are actually doing next let's go to the advanced tab i'm going to unlink the padding values and where it says margin i'm going to unlink then i'm going to put minus 175 i'll tell you why in a moment but the way to do this is to use 175 then use the cursor on the keyboard to go all the way to the left and add the minus sign okay so you see everything shifted up this is because because it's transparent you want to shift the content up otherwise it's just going to be white you think it's white color but it's transparent but you need to shift the content up okay next let's click on our first column here and where it says vertical align you want to select middle next you want to go to the advanced tab and give it 70 pixels padding everywhere then unlink the values and just like previously it's going to be 70 90 70 160. next click on the second column go to the advanced tab give it 70 everywhere once again then unlink the values and it's going to be 70 60 70 90 pixels okay so now we can add our logo and uh button but if we take a look at the example that's how it goes so logo on the left and our button on the right hand side but instead of recreating everything i'm just gonna go back to the pop-up we created i'm going to right click on the image click on copy then let's go to our first column right click and paste as you can see now we already added the padding but there was nothing in there so that's why you see such a dramatic move but the padding was already there so let's go back i'm going to right click on the button copy and once again on the right hand side in the column i'm going to right click and paste okay so i have my button right here but i need to change a few things so let me select the button okay so first of all i'm going to go to the content tab and where you see the icon library i'm going to click on the icon and i want to add a different icon so that's going to be a navicon so i'm going to use this one griplines click on insert because this is the nav i want to actually open the pop-up okay next i want to change the behavior of the pop-up if you recall if you click on the wrench icon because we copied that button he had a close pop-up behavior we want to open a pop-up okay and i'm in the drop-down i'm just going to type the name of my pop-up i have only one on this uh website so it's pop-up fullscreen nav okay and now when i will click on this button it will open the navigation okay before we take a look at what it looks like on the front end we need to do a couple of things so make sure you select the section then go to the advanced tab and where it says set index type 1000 and that's very important because if you don't do this the whole header will feel like it disappeared but that's just because there's something in front of it so you need to type 1000 here in the z index okay and next we want to go to the style tab and we want to click on background open our color and we're going to drag the opacity all the way down because if you recall we only did this to be able to see what we're doing so let's click on publish and it's going to ask where do you want to display your template so click on add condition entire site by default click save and close and that's it so now let's go back so this is what we had let's refresh and there you go so it's looking fine but actually i see a tiny line here at the top so let me go back to my section advanced and let me play with the values so i'm going to try to shift it up one minus 178 and there you go works fine now you may also need to do this because of course you might have some elements of various sizes so now you know what to do okay so let's take a look at our menu so now if i click on menu as you can see we have everything in place we have our logo that's clickable we have our menu button that we can close we have our text social icons all the elements are in place i click on menu and it falls back to closing the pop-up okay so now let's take care of the tablet version so let me go back into responsive mode tablets and here where it says margin so with my section selected i'm going to unlink the values i'm going to type 95 go at the front of the nine add the minus sign okay and next i want to select column number one and i'm going to give it a padding of 30 pixels all around and same thing for column number two 30 pixels all around let me click on update now let's go to our frontend version let me refresh okay and when i open okay looking good but once again i have a slight line here on top so i can play with the values so section and it's going to be -97 let me go back okay looking better and as you can see this is why we use the fading animation sliding animations and all of that actually the logo and the menu come on top of the other ones so you have the illusion that you you get the open and closed state and that's working fine okay so now let's go into mobile mode if i refresh as you can see it's not working quite the way we want so let's go back let's go to mobile mode with a section selected and link the margin values on the advanced tab i'm going to type 87 this time minus sign next let's select our first column go to the layout tab give it a 50 width next i want to go to the advanced tab and link the margin values and link the padding values and i'm going to give it a 20 pixels left padding next i want to select the column number two go to layout give it 50 then go to advanced and link the margin values and then i'm going to type 20 all around for the padding unlink the values and give zero pixels on the left hand side let's click on updates and as you can see it's working fine so now if i click the only thing you don't have is the logo here on top but that's by choice because it would have made this tutorial even longer so now when i click as you can see it's working fine now the last thing to do is to add the video background so open the home page with elementor click on the section here in the navigator go to the style tab and where it says background instead of the classic image we're going to click on video and here i'm just going to paste a video it's from nico gentinen i'm sorry if i mispronounced the name but that's a beautiful video it's just for the sake of showing you how to add a beautiful video of course give credit where it's due and i'll put the link to this beautiful video in the description below okay and i'm just going to make it start at 27 seconds stop at 235 and i want it to play on the mobile okay so let's click on update and now let's go back to the front end let me refresh and as you can see it's working beautifully so it works here on the desktop and when i hover over the blocks there are clickable if i open the navigation it's semi-transparent so you can still kind of see the video in the background and i got all the elements of course i could play with the opacity if i want to make things more readable but this tutorial is long enough and i'll let you play with all the tweakings that you want so i can close this and now as you can see it's really beautiful now if i switch to mobile it works fine and i can go into ipad mode and it works fine also now of course the choice of the video is very important because if you want it to look beautiful look for a beautiful video you can get some stuck videos or maybe you can shoot videos yourself but it's key it's really important if you ruin this with a bad video all of this would have been for nothing so i hope that you got value out of this tutorial and i can't wait to see what you're going to come up with so don't forget if you haven't got elementor pro yet the affiliate link is in the description below now if you enjoyed this video please give it a thumbs up as it really helps grow in this channel and if you want more tutorials and just web design stuff make sure you subscribe and smash the notification bell so that you don't miss anything now i know this was a long video but hey you don't create professional stuff in five minutes so that's it for this video make sure you don't miss the next one and in the meantime don't forget to invest in your success [Music] you

Channel: Kaycinho The Digital Alchemist

Views: 3,951

Keywords: how to create a transparent header menu in wordpress with elementor pro, elementor pro, transparent header, elementor pro header, elementor pro header tutorial, elementor pro menu, elementor pro transparent header, transparent header wordpress, elementor header menu, elementor transparent header, mega menu elementor pro, wordpress transparent header, elementor header, elementor menu, elementor transparent menu, elementor wordpress tutorial, wordpress header

Id: yzYj4ChmwW8

Length: 56min 36sec (3396 seconds)

Published: Thu Oct 29 2020