Have you ever observed that many standard web sites are actually utilizing sticky navigation menu. Usually, navigation menus are displayed on high and disappear as customers scroll down. Sticky navigation menus float as customers scroll down and are at all times seen on display screen. On this article, we’ll present you learn how to simply create a sticky floating navigation menu in WordPress.
Methodology 1: Add Sticky Floating Navigation Menu Utilizing Plugin
This methodology is simpler and is advisable for all customers. If you happen to haven’t setup the navigation menus but, then please see our information on learn how to add a navigation menu in WordPress.
Very first thing you want to do is set up and activate the Sticky Menu (or Something!) on Scroll plugin. For extra particulars, see our step-by-step information on learn how to set up a WordPress plugin.
Upon activation, you want to go to Settings » Sticky Menu (or Something!) web page to configure plugin settings.
First you want to enter the CSS ID of the navigation menu that you simply wish to make sticky.
You will want to make use of your browser’s examine software to search out the CSS ID utilized by your navigation menu.
Merely go to your web site and take your mouse to the navigation menu. After that, you want to proper click on and choose Examine out of your browser’s menu.
It will break up your browser display screen, and it is possible for you to to see the supply code on your navigation menu. You must discover a line of code like this:
|
1 |
On this instance, our navigation menu’s CSS ID is site-navigation.
Go forward and enter the navigation CSS ID within the plugin settings like this #site-navigation.
The following choice on the plugin’s settings web page is to outline the area between the highest of your display screen and the sticky navigation menu. You need to use this setting in case your menu is overlapping a component that you do not need to be hidden. If not, then ignore this setting.
After that you want to click on the checkbox subsequent to the choice: ‘Verify for Admin Bar’. This enables the plugin so as to add some area for the WordPress admin barwhich is simply added for logged in customers.
The following choice within the settings web page permits you unstick the navigation menu if a consumer is visiting your web site utilizing a smaller display screen corresponding to a cellular machine.
You possibly can check the way it appears on cellular units or tablets. If you happen to don’t prefer it, then you’ll be able to add 780px for this selection.
Don’t overlook to click on on the save settings button to retailer your adjustments.
Now you can go to your web site to see your sticky floating navigation menu in motion.
Methodology 2: Manually Add Sticky Floating Navigation Menu
This methodology requires you so as to add customized CSS code to your theme. If you happen to haven’t finished this earlier than, then please see our information on learn how to simply add customized css to your WordPress web site.
First you want to go to Look » Customise to launch theme customizer.
Click on on ‘Further CSS’ within the left pane after which add this CSS code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
Substitute #site-navigation with the CSS ID of your navigation menu and click on on the Save & Publish button.
Now you can go to your web site to see your sticky floating navigation menu in motion.
In case your navigation menu usually seems after the location header, then this CSS code may overlap the location title and header.
This may be simply adjusted by including a margin to your header space utilizing some CSS like this:
|
1 2 3 |
|
Substitute site-branding with the CSS class of your header space.
We hope this text helped you add sticky floating navigation menu to your WordPress web site.
