Sticky Frosted Bottom Navigation Menu - Elementor Wordpress Tutorial - No Extra Plugin

Based on a request to have a Frosted Bar - Navigation Menu that is sticky near the bottom.
Quick and easy with no extra plugin.
Frosted CSS:
.frosted {
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
}
Bonus CSS for Button Styling if required.
selector {
border-radius: 25px 0px 0px 25px;
border-width: 2px;
border-color: #ffffff00;
border-style: solid;
}
selector:hover {
border-radius: 25px 0px 0px 25px;
border-width: 2px;
border-color: #ffffff;
border-style: solid;
background-color: #000000ad;
}
Sticky Frosted Bottom Navigation Menu - Elementor Wordpress Tutorial - No Extra Plugin
Hire us to work on your Website! [e-mail] or visit websquadron.co.uk
Get Elementor Pro: be.elementor.com/visit/?bta=2...
Get Elementor Cloud Hosting: trk.elementor.com/bapnesbbfa9...
Support us: paypal.me/Websquadron
Mastery Membership: websquadron.co.uk/web-design-...
Indeed we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
Equipment Used:
Softbox Lighting Kit (to focus main light onto me in a dark room): amzn.to/3feqH18
Soundproof Panels (to provide a dark setting, and prevent sound bounce): amzn.to/3HVfwqa
3m Ethernet Cat 7 Cable (to maximise the Internet Connection as the room is upstairs): amzn.to/3GlBvGw
Anker 6 in 1 Adaptor (for the Macbook Air to increase USB-C, USB-A, HDMI, Ethernet Ports): amzn.to/3tiukLA
USB-C to Lightning Port Cable (from my iPhone to my Macbook Air): amzn.to/3K2tGaU
Powerline Adaptor (boosts internet connection from downstairs 380mbs to the upstairs room 120mbs): amzn.to/3r8YcYc
Floodlights (positioned to glow onto the walls): amzn.to/33mRqWD
LED Light stands (either side of me): amzn.to/3Iaerez
Fifine Dynamic Microphone: amzn.to/3osbxu2
Floating Shelves: amzn.to/3Fhxyl1
Hanging Pendant Light Holders: amzn.to/3qgwnhg
Vintage Light Bulbs: amzn.to/3K0bQ8B
Music used:
Track: Will You Be Mine (Remix)
Free download: brokeinsummer.com/will-you-be...
Artists: brokeinsummer.com
Contact: brokeinsummer.com/help
Music provided by Audio Library Plus
- Get Elementor Pro here --- be.elementor.com/visit/?bta=2...
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/info-28542
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at [e-mail]
PPPS: We only build with Elementor Pro

[@digital-motor]

The best elementor pro YT channel, always clear and straight to the point, thank you!

[@powerapp671]

Amazing!! Thank you for your tuts!! You rock!

[@hollandnr1453]

thank you for making this video. I got a lot out of it. I shared this video to my friends. Hope for more videos in the future.👍🏼

[@websquadron]

Thanks for sharing! And I hope it helps. I know it's not everything that you wanted, but covers off the core bit about having the floating Nav Bar near the bottom.

[@Melissa_Lawrence]

Ohhhh, I like this! I wouldn't think I would like the look of that but I do, it's a great idea!

[@websquadron]

Glad you like it!

[@Melissa_Lawrence]

@@websquadron always!

[@MarioFajt]

What will happend with this menu on mobile phone screen?

[@Who.Said.Photography]

Nice! Great tut, wondering if this could be a floating menu for a site?

[@websquadron]

Absolutely yes

[@jack2media]

Great content! - How do you have each button take you to a certain section on a one page landing page?

[@websquadron]

Add a name to the CSS ID of the element - let's say the ID is optimus.
Then on another page, add a link or button with URL/PageSlug/#optimus
It will then go to that section, element, etc.

[@alexanegeschwindermann2670]

Hi ! Thanks a lot for that video, I was looking how I could do this menu. But I have a problem, maybe you can help me !
When I'm on Elementor this menu works but when I'm on the website the menu has moved. Have you ever had this problem before ?
Thanks a lot and have a really nice day ! :)

[@websquadron]

Could be due to positioning. Or have you any other items that are fixed to the bottom? Also does it depend on the screen resolution/device.

[@aman64045]

How can create FREE 🆓 Android app of any wordpress website sir ???? Please video

[@websquadron]

You need to use a converter. www.wordpressintegration.com/blog/convert-wordpress-to-mobile-app/