How To Create A Sticky Floating Navigation Menu - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Wordpress WPLearningLab Video: How To Create A Sticky Floating Navigation Menu.
Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL
How To Create A Sticky Floating Navigation Menu https://youtu.be/E0Lc-is2D_Q

Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist

Ever wanted to have a main navigation bar that follows the visitors of your WordPress site when they scroll down the page? That's called Sticky (Floating) Navigation. Most new themes have sticky navigation in place, but this tutorial is for the ones that don't.

Luckily, it's really quick to add and it can improve user experience a lot. It can be done in two ways, both are quite simple but for the purpose of this tutorial, we'll stick to the method using a plugin. Ready or not, the tutorial starts right now.

Let's Get Into It

What you need to do first is find the right plugin and install it. I've tested different plugins and we'll be using the only one compatible with the 4.8 WP version as of this writing: myStickymenu.

To find the right plugin, go to Plugins menu and click on Add New.

In the search box, type in ‘sticky header' and click on search.

The best plugin compatible with the current version of WordPress(4.8) is the previously mentioned “myStickymenu” plugin.

Install the plugin by clicking on Install Now and then click on Activate.

After you activate the plugin, you'll notice that you have a new option in the settings menu called myStickymenu. Click on it to open it.

In most cases, the only thing you'll need to change in the settings is the Class of the sticky header.

The class ID looks like this. The default is .top-nav which is used in many themes. So check your website to see if the navigation is sticky with the default settings.

If the .top-nav is not the class of your header, the you'll need to a little investigating.

To find the class of your header right-click on it and then click on Inspect.

This will open the source code where you'll see the class of your menu bar.

When you hover over the row with the class, the menu should turn blue. This proves that the class you selected wraps the whole menu. What you need to do next is copy the class and paste it inside the sticky class box.

Ensure that there's a period in front because a period indicates that it's a class. A hashtag would indicate that it's an ID and the plugin cannot work with that.

Once you have the right class in the plugin settings, save the changes and refresh your page. Your header menu should now be sticky and follow you when you scroll down the page.

Read the rest on the blog: https://wplearninglab.com/sticky-header-menu/

Subscribe to this awesome channel here: http://www.youtube.com/subscription_center?add_user=wplearninglab

Published: Saturday, August 10, 2019 8:44 AM
Category: Wordpress WPLearningLab

87 Views

Related Videos

Floating Action Menu Using Html CSS & Javascript | Animated Navigation Menu with Icon

by Best Webhosting Added 1 year ago 23 Views / 0 Likes

Click For More : https://www.youtube.com/c/OnlineTutorials4Designers/videos?sub_confirmation=1 ------------------ Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D CSS Infinity Course : https://www.udemy.com/course/infinity-creative-css-animation-course/learn/lecture/28410660?referralCode=7AC20462B284B24ECCFF#overview Anothe
How to Create a "Sticky" Floating Sidebar Widget in WordPress

by Best Webhosting Added 4 years ago 94 Views / 0 Likes

Elements on your site that stick to your screen tend to get clicked more often than static objects. This is why on some sites they are so popular. In this video, we will show you how to create a sticky floating sidebar widget in WordPress. If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos. Text version of this tutorial: http://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-w
How to Create a Floating Pop out Menu in Divi

by Best Webhosting Added 4 years ago 81 Views / 0 Likes

Adding a floating pop-out Menu to your website will make it easy for visitors to access your menu at anytime throughout your page. This is great for sub navigation menus that compliment your primary navigation at the top of your page. It also allows you to display menus specific to your page content. For example, you may want to have a custom sub navigation menu for your services page that provides links to all of your different services. In this tuto
How To Create Curtain Layer Menu | Responsive Fullscreen Overlay Navigation Menu

by Best Webhosting Added 3 years ago 24 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D Another Course : Build Complete Real World Responsive Websites from Scratch https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E ------------------ Join Our Channel Membership And Get Source Code of My New Video's Eve
How To Create a Sticky Nav Bar Using Html CSS and Javascript - Navigation Bar Fixed Top After Scroll

by Best Webhosting Added 4 years ago 95 Views / 0 Likes

Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Popular
Full Screen Animated Sticky Header | Sticky Navigation Bar After Scroll with Html CSS and jQuery

by Best Webhosting Added 4 years ago 109 Views / 0 Likes

Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Music Credit Track: Tobu - Roots [NCS Release] Music provided by NoCopyrightSounds. https://www.youtube.com/watch?v=7wNb0pHyGuI
Pure CSS Sticky Navbar After Some Scroll | Html CSS Sticky Navigation

by Best Webhosting Added 4 years ago 100 Views / 0 Likes

My Amazon Shop : https://www.amazon.in/shop/onlinetutorials Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Track: Jordan Schor & Harley Bird - Home [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/KmwpogFtb4Q Free Download / Stream: http://ncs.io/HomeYO
How to Create a Global Transparent Floating Menu Bar with Divi’s Theme Builder

by Best Webhosting Added 4 years ago 75 Views / 0 Likes

Looking for a way to put your global header on top of your pages’ hero sections? In today’s Divi tutorial, we’ll show you exactly how to do that. We’ll recreate a stunning global header from scratch (using Divi’s Theme Builder) and we’ll apply a floating effect to the menu bar. You’ll be able to download the JSON file for free as well! Read more: https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-global-transparent-floating-menu-bar-wit
How to Create an Expanding Sticky Menu on Hover with Divi

by Best Webhosting Added 4 years ago 96 Views / 0 Likes

Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level. This week, as part of our ongoing Divi design initiative, we’re going to show you how to create an expanding sticky menu on hover using Divi’s Mechanic Layout Pack. We’ll handle two different design examples that you can recreate from scratch
How to Create a Navigation Menu in WordPress

by Best Webhosting Added 1 year ago 17 Views / 0 Likes

Here is how to create a navigation menu in WordPress if you are using a none Full Site Editing theme. --Top Resources-- ⚡Use Promo Code WPBVIP⚡ ►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner ►Best WordPress Analytics Plugin https://www.monsterinsights.com/ ►Best Lead Generation Plugin https://optinmonster.com/ ►Best WordPress SEO Plugin https://aioseo.com/ ►Best Theme Builder for WordPress https://www.seedprod.com/ --Related Videos
Popular
Responsive Menu with HTML CSS and javascript - How To Create a Responsive Navigation Menu - Tutorial

by Best Webhosting Added 4 years ago 113 Views / 0 Likes

Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Track: Cadmium - Melody (feat. Jon Becker) Link: https://youtu.be/9MiFRbymQXQ
Popular
How to Create WordPress Theme Navigation Menu HD

by Best Webhosting Added 4 years ago 102 Views / 0 Likes

Create easy Navigation Menus on your WordPress website. Navigation menus help your user to navigate easily on your WordPress website. Useful WordPress Themes Links: WordPress Blog Themes - https://mythemeshop.com/theme-category/wordpress-blog-themes/ WordPress Business Themes - https://mythemeshop.com/theme-category/wordpress-business-themes/ WordPress eCommerce Themes - https://mythemeshop.com/theme-category/wordpress-ecommerce-themes/ Free WordPress