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

what's going on everybody I thought I'd give you a quick video to show how you can make a menu item or any type of item in Elementor sort of float float or hover above other content sluices show you what I'm talking about on this website right here when we scroll down the menu right here it sort of follows us and it floats above everything else and no matter how far we go down the page it sticks and it follows this and that's a that's a feature that I'm that I'm sure some people out there would like to achieve an element or as well so I'm gonna show you a very quick and easy way to do exactly that so I have a premade element or template right here that I found in the element or library so let's just say that I'd like a menu on top here and I would like that menu to sort of follow me as I said when I go down the page so in order to do that we just add a new section it's a regular section right here and we add a menu as I'm sure you guys are familiar with from before I'd like the menu to be centered and make sure to stretch the section if you want it to be displayed in the center right here now if I go back to the page and I scroll down as you can see the menu stays on the top of the page which can be pretty annoying if you just like it to follow you so for different reasons I'm sure so let's say that I'd want this to be having a white background color just to make it clean and I want the content to be positioned in the middle now it looks pretty good and in order to achieve the effect that I'm talking about we're gonna go back to the Advanced tab right here to the Advanced tab right right right here and we're gonna set the see index higher than the content that it'll sort of follow right so to make the the menu item float we go down to the custom CSS area and I've have some code right here that I've that I've written and I'll make sure to share that you share that with you guys in the description paste that in and as you can see right now it'll follow you when you go down the page however notice that when you come down here hit the it disappears behind this this image right here because I'm pretty sure that that image image has a higher C index set than the menu or the section of the menu is in so it's one right here so we're going to have to make sure to adjust the see index right here so let's just bump it up to five for good measure and now when you scroll down everything is floating the menu is floating above everything so it works the way that we want it to it's pretty cool in it and I guess that's it I'll make sure to share the code with you guys and have a good day Cheers .

Video Discription

Make the Elementor nav-menu widget stick and float as you scroll a page.

The custom CSS I'm using in the tutorial is:

selector { position: fixed;
}

That's it!

 

Leave a Reply