✅ Featuring the Kadence Pro Theme Add-on -
https://cliftonwp.com/kadence
Want to create the same page in the tutorial? Watch this video:
https://www.youtube.com/watch?v=vdM_nEaMdYs
🙏SUPPORT & THANK YOUS?
✅ Buy me a Coffee -
https://www.buymeacoffee.com/cliftonwp/extras
✅ Leave a Super Thanks in YouTube Comments
In this Kadence tutorial, you learn how to create a beautifully designed custom fixed floating mini navigation for your website. Whether you're looking to enhance a specific page or implement it across your entire site, this step-by-step guide will show you how to achieve it with ease. Using the Kadence Hooked Elements feature in the Kadence Pro Theme Add-on, you'll discover how to seamlessly integrate this elegant solution into your design.
Here's what you'll learn:
- How to craft a custom mini navigation using Kadence Blocks
- The power of Anchor Links to connect sections and content within your page
- Techniques to ensure your navigation element floats and stays fixed using a hooked Kadence element
- Tips for making it mobile responsive so it shines on all devices
By the end of this tutorial, you'll feel confident in creating fixed hooked elements with Kadence and the Kadence Pro Theme add-on. If this video helps you along your journey, we’d love for you to give it a thumbs up, share it with your community, and consider subscribing to the channel. Don’t forget to click the notification bell 🔔 so you never miss out on future tutorials!
Timestamps and resources are below!
Enjoy!
Timestamps:
0:00 Intro: How to Create a Custom Floating Fixed Navigation Bar
0:2:09 Getting Started: Page Set-Up
03:27 Kadence Theme, Kadence Blocks & Kadence Pro Theme Add-on
03:39 Where and How to Get the Kadence Pro Theme Add-on
05:30 How it install the Kadence Pro Theme Add-on and Activate Kadence Elements
06:10 How to Create a Fixed Hook Kadence Element
06:37 How to design a mini navigation section with Kadence Bloc
15:57 How to assign the hooked element to a specific page
19:33 How to add Anchor links to your Navigation
26:06 Mobile Responsive Editing: How to make your floating navigation mobile responsive
31:51 Conclusion and Thank you!
🧰TOOLS AND LINKS I USED IN THIS TUTORIAL
✅ WordPress CMS: FREE
✅ Kadence Blocks Pro -
https://cliftonwp.com/kadence-blocks
✅ Kadence Theme Pro Addon -
https://cliftonwp.com/kadence
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
🧰PRO VERSION OF TOOLS I USE
✅GiveWP Pro Addons -
https://cliftonwp.com/give
✅ Kadence Theme Pro Addon -
https://cliftonwp.com/kadence
✅ Kadence Blocks Pro -
https://cliftonwp.com/kadence-blocks
✅ Kadence Shop Kit Addon -
https://cliftonwp.com/kadence
✅ InstaWP -
https://cliftonwp.com/instawp
✅ Domain & Hosting by Siteground:
https://cliftonwp.com/host
🧰 FAVORITE WEBSITE BUILDING TOOLS
✅ Kadence Theme Pro -
https://cliftonwp.com/kadence
✅ Kadence Blocks Pro -
https://cliftonwp.com/kadence-blocks
✅ Kadence Conversions - Kadence Pro Bundle -
https://cliftonwp.com/kadence
✅ Domain & Hosting by Siteground:
https://cliftonwp.com/host
✅GiveWP Pro Addons -
https://cliftonwp.com/give
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
🏆RECOMMENDED EMAIL MARKETING PROVIDER
✅ Mailerlite:
https://cliftonwp.com/mailerlite
🏆 BEST HOSTING COMPANY
✅ Siteground:
https://cliftonwp.com/host
✅ WP Engine (Premium managed hosting):
https://cliftonwp.com/wprocket
🏆 BEST PRO GUTENBERG BLOCK PLUGINS
✅ Kadence Blocks:
https://cliftonwp.com/kadence-blocks
⭐ RECOMMENDED PRO WORDPRESS THEMES
✅ Kadence Premium Theme:
https://cliftonwp.com/kadence
✅ Astra Pro:
https://cliftonwp.com/astra
⭐RECOMMENDED PRO FORM PLUGINS
✅ Gravity Forms
https://cliftonwp.com/gravityforms
✅ Fluentforms :
https://cliftonwp.com/fluentforms
🏆 BEST SPEED PLUGIN
✅ WP Rocket:
https://cliftonwp.com/wprocket
⭐ BEST WORDPRESS PAGE BUILDER
✅ Beaver Builder:
https://cliftonwp.com/beaver-builder
⭐ BEST COMING SOON PLUGIN
✅ SeedProd:
https://cliftonwp.com/seedprod
AFFILIATE DISCLOSURE
Please note that any links within this video and its description may contain affiliate links which means that if you click on one of the product links and purchase a product, I may receive a small commission. The commission does not increase the price you pay for the product and you can always purchase directly from the source. By using my affiliate link, you are supporting the work of the channel and I thank you for that.
Lastly, All of the opinions in this video are my own. I did not receive any compensation for making this video. Thank you for watching and thank you for your support!
#floatingCustomNav #KadencePro #Cliftonwp #WebDesign #KadenceTutorials
Тэги:
#kadence_elements #kadence_tutorial #kadence_theme_tutorial #kadence_blocks #kadence_hooked_elements #kadence_theme #kadence_blocks_pro #wordpress_tutorial_for_beginners #kadence_theme_pro_tutorials #floating_navigation_bar #fixed_navbar_on_scroll #fixed_navbar_wordpress #custom_navigation_menu_in_wordpress #wordpress_website_design