Σ 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 🙂

hello everybody and welcome back to another quick wordpress and Elementor tutorial i was thinking the other day that it would be kind of cool to have sort of an app style navigation menu on websites or the mobile version of websites so I was thinking if whether or not it would be possible to do that in Elementor so let me just show you the type of menu that I'm talking about this is just a screenshot of the fiber app and as you can see they have this bottom navigation menu that's fixed to the to the to this to the app so whichever page you go to this navigation manual will be right here right here at the bottom and as you can see Instagram uses the same thing in a lot of modern apps they use they use that type of navigation so I wanted to try to achieve the same thing in Elementor and it turned out to be super easy so I thought I'd just make a quick video showing you how you can do it so the first thing that I'm gonna do is just add a section just a regular section is fine and then we're gonna just jump right into it and I'm gonna add a heading and I'm gonna add an icon widget place that at the top here they're both centered that's very good or now the heading is central at least and I did some experimentations earlier and I know that 25 is a good size for the icon and I know that let's see here 14 is a good size for the heading for mobile and I want the icon to have the same color as this other theme color if you want to call it that here so I'm gonna paste that in and make it yellow and I actually want the background of this section to be black I'm just gonna go all in and try to make it pretty cool and then the heading can't be white and then I obviously don't want as much space between these right here so I'm gonna set this to zero and then I want to column width to be 20 because we're gonna have five sort of items here so so you know 100 times 5 thats 20 according to my math and then I'm just gonna write home just create sort of like a fictional menu for this and add the appropriate icon and then I'm gonna duplicate the section five times I'm gonna try to speed this up because I'm sure you could probably figure this out on your own but let's just go right through it and then we could probably have a menu thing and then let's just see if I can find a appropriate icon I saw the spoon here earlier so I'm gonna go with that mm and then mm-hmm excuse me poking just add that Bing right there let's just add a book icon it's as good as it's good an icon I could come up with right now we could obviously do this with different icons and then we could have sort of a picture you imagine a picture page on the site pictures and then a Contact Us page so envelope I believe yeah you could experiment with these different icons again and just could also upload your own icons by the way I saw somebody who did that pretty cool so contact so there we have it right there there there's the navigation menu so now the only thing remaining to be done is to make it stick to the bottom of the screen and you might have seen that element or now has the option to add a scrolling effect so you could do this and you could make it so that it sticks to the top of the page on mobile in this case so we would be like that so if you if you want this at the top you could do this and just leave it as is but if you wanted to stick to the bottom you actually as far as I'm concerned cannot use this feature so we're just gonna add two lines to CSS to achieve the effect so I'm just gonna type selector and then position:fixed and by the way before I do anything else we need to increase the C index of the section because if you don't do that it'll disappear behind the other content so let me just bump it up to just keep it at ten and then the next thing that wouldn't do as you can see here before I do anything else this section isn't really full width at this point so what I'm gonna do is I'm gonna go to the layout then I'm gonna stretch the section so there we have it and then back in the CSS tab just another line is required we're gonna type in bottom and then zero semicolon brackets and there we go very cool huh and I did actually try this earlier today on a live website where I could you know actually check it out on on my phone and it looks really good so if I were to put this on a live site I would probably make this a little bit smaller the font size live is smaller stuff like that maybe do some more I don't know some more matching icons maybe has with some frames or whatever but as you can see this works pretty well and it should work on any smart phone because this is just very basic CSS at any browser and phone could process so there you go it's pretty cool in it and I guess that's it for this video maybe I'll see you back in another one someday thanks for watching and have a good day .

Video Discription

Many popular apps uses a fixed bottom navigation menu. Learn how to create a similar menu for your website using Elementor and two lines of CSS. Please leave a comment if you have any questions, and be sure to have a great day!

 

InterServer Web Hosting and VPS

Leave a Reply