Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

hi everyone here antoine first thing to do to create his menu us are going to go to appearance menu i will create a new menu that menus name and I will add personalized links waiting to have all my pages therefore items one theme two items 3 I will save my menu and I will do what menu does not automatically appear on my website by next in the left menu a model I will go to the theme builder i will add a new template and i will select the type and hours so it's at the top of the page that I want call menu I will click and create a model and close the library because I don't need it first thing to do I will open my browser and drag it to the right so that they are an integral part of my window I go by the next create a full width structure that I will rename by double-clicking menu in the left section to edit section I go to width of content choose full width is up to the height i will give a height minimum of 125 pixels you will see later why we do this thereafter i go to advanced to css class i will give it the name of menu class is motion effects polish it will be great sticky fx of 7 we have 10 pixels what is that is going to do in the end when your site loads the menu is going to have a certain width and when scrolling the menu will become full width if we had not set 10 pixels by default the menu would have been full screen width good we will now save what we have have published save that's all for now we will continue we let's now add some css code so always advance to custom css we will choose between the selector which is our menu we will open the braces and we will put a transition for the width 10.5 seconds with 1.6 what an is got done that the animation will start quickly it is almost to normal and end more quickly still they continue we will set the width to 1200 pixels we are going to choose the left so 50% and now you see that the left part tomorrow structure is now centered but we want the bring back to the middle of the screen to do this we will do a transformation therefore 30 fist fair translate x -50% and its revenues focus we are now going to select the inner container of our section so once again its readers thereafter space dots and mentors continuous hyphen or braces and we will put a max 8 at 1150 pixels you will see I chose 50 pixels less for the inner container versus 1200 pixels for the full section when animating if you forgot to specify the width of the container or again you gave an example 1200 pixels your item interiors will move a little bit laterally when the animation has place so to solve this problem we just made a whole width little bit smaller let's update and we will continue open in the browser the menu and we now have a column what we are going to do we are going to duplicate this column in right click begging and we have it now two and we will do it again a third time to have three so the left column will be our logo the holy hill will be empty and the column on the right will be our menu so the logo we will add an image to the left I already have my image insert see now it's too big what the loonois we are going to do if we are going to go to advance in fact first hand to size of pictures we will put whole before ccss we will take the selector again and we'll give it a maximum width of 100 string is it possible yes it's good and we will give a automatic height that's all let's save in the column on the right we want a menu and here we have our three themes the thing to do here at the moment is left togo botana to have a bug there we don't want it so we'll make our own menu when we are on mobile or ipad so we change that baby i like well the menu is on the right that's on the left update it's good now let's go back to the main menu section then from style to style borders we are going to give a type of borders continuous width it will be a slow to have had many colored boxes the door on a grid jamie the shadow one a little paler, pascal redone up there save not preview and here we are in private viewing we have our menu so at 1200 pixels wide we have the interior systems so the interior container to 1150 pixels of maximum width we have our systems to right our logo on the left keep going items here are aligned upwards we would like the center holdings and we let's cut the right column horizontal vertical alignment sorry we have sectioned the middle here is what is done can do the same for the logo we put a perfect day at borders if we return to the menu rays the border we are going to put a radius at the bottom of 25 is seen right 0 in water like this we have both sides which are rounded let's go back to see the preview setting now we will choose a page that I have done i pay then should review and now if we scroll and nothing that come on why then see here is the menu we are going to give it a white background we are going to give it an index after that z to five great chefs as you wish we save perfect now everything goes below perfect now we can add animation so we remember at the beginning a menu we had given the class and this menu we will therefore select it for a menu that and we will therefore add points and trait mentors sticky hyphen two hyphens fx we were stuck with water m width 1 5 v w provided 8 so 100% of the screen width is what we're going to do a important exclamation mark space next line we will put so what is in round here we would like that when full screen do not see the corners rounded but straight so 2.060 official zero pixel zero pixel is again important to update so see what it looks like and now when a parade we have a beautiful animation if we continue thereafter obviously we do not want this menu is displayed this way on mobile what are we going to do clicking on menu in the browser to responsive we go hidden on tablet is hidden on mobile we are updating and now if we will see a chang'an for tablets or finally phone there are no more menus so solve this problem we will create a new structure full width again full width it we let's go this time the height give again the height of 125 pixels so our two rows have the same height let's add an elie konki icon zale have sectioned and the one called barre therefore the three small bars I will level it on the right add a very small margin to the right the 25 pixels change the color for any grid and this section the g we are going to call mobile menu is going to be hidden on computer then see the result animation the menu then on phone we have our mobile menu now we want something to appear here what is we will do we have updates we will exit to the table panel and we are going to go is a template added pop-ups new pop up the pop-up menu a pop-up the app name the mobile menus created a template closing the library width 645 seems good to me no that is not good because we want this to be mobile only so we're going to have eight la place pixels we will do that for that for that and at the height we let's do it's all screen like these the position of the content will be focused to do we buy a structure I opened my browser and htts and you will see that number one menus explained explained and duplicated number 2 3 and 4 like this everything will be centered i had noticed so i just bought four titles I did not put other menus because the menu option and not very good hamon in my opinion it is always full of display problems the big ones on two texts does not work correctly it's complicated for nothing so what we do is add systems when your pages will be created it's quite simple so you clicked wish menu item you go to links in the left section and you enter the name of the page I have one called sam paige if I m if I put it on and it appears so I can select and now I have a link to this page to update conditions I want this menu to appear on my entire site if they keep killing google ventures no we don't need that to the moment only the condition the whole site next next save and returned section1 style I will add an input animation so in bottom left completely decree sent the small wheel settings I will click on entry animation I want to do so it goes up the start animation lay down up and 1.2 seconds is too there i will love it 3.6 ever one day and i can quit now this menu I will return thereafter from a theme builder to the menu I will modify with the mentors and I will therefore seek my opinion spoilers my nikon and allies you see it is marked dynamic i will click on it and i will go and get pop up once selected I now want ticket on not for a second time and look for my pop up so I called it mobile menu were working perfect mobile menu update and now so my menu is ready i will add a condition so I go to my entire site again times I save we will preview choose so without paige and now we see our animation if I go to a mobile and I click on it we see the menu that appears and I can do it but hey we see now that there is like a color black behind the menu because I forgot to remove an option so I will return to my pop up in the mobile menu I will modify it with the mentors and offered them here I'm going to hide I'm going to update myself let's go back to see salon reload the page in mobile mode we click and that's it hope you enjoyed this video if you liked it you can share you can subscribe to my channel i will make other videos soon and thank you for listening goodbye .

Video Discription

Apprenez comment créer un menu "sticky" qui a une animation au défilement de page. Nous allons aussi créer un menu qui s'affichera sur tablette et mobile.

Les plugins & le thème utilisés:

Elementor PRO:
Thème:

Introduction à Elementor:

 

Leave a Reply