in

Beginner’s Guide: Create Your First Floating Navigation Menu in WordPress

CREATE A FLOATING NAVIGATION MENU

The Navigation Menu is one of the most important aspects of a website. Your users will only be able to find the way on your site through that menu. In most of the websites, the navigation menu is static due to which the visitors have to scroll their way back to the top to switch between pages or to use any specific feature of your website.

While a static navigation menu works fine, a mobile or a floating navigation menu enhances a website usability. You can add a floating navigation menu to your WordPress website without any coding complications. There are basically two methods of doing so – one is by using the plugins, and the other is doing it through manual coding.

We will discuss both of these the methods, but firstly, let’s talk about the plugin method

Adding Floating Navigation Menu through Plugins

The plugin method is proven to be easier than the manual process as the plugin itself does all the major work.

Step 1

In the first step, you need to download a plugin for this process. There are tons of plugins that will get the job done, but we are using the Sticky Menu (or Anything!) on Scroll for the time being. To install this plugin, navigate to the WordPress Admin dashboard and visit the Plugin area. Search for the above plugin, click on Install Now and Activate Plugin.

Step 2

Once the activation is complete, head back to the WordPress admin dashboard and click on Settings and then on Sticky Menu.

Here, you will be configuring this plugin as per your website. In the Settings menu, you need to enter the CSS ID of the navigation menu to which you want to give the floating appearance. To do that, open your website and right click on the navigation menu. Now click on the Inspect option, and you will now see the source code of your website. Find the code which includes class=”main-navigation” role=”navigation”. Copy the code after <nav id= and paste it into the plugin.

[Sticky]

Step 3

In the next step, you will be deciding the space between the top of the screen and the floating menu. Enter the details in pixels as per your preference and move on to the next step. Experiment with the pixels before zeroing on the right one.

Step 4

The next option is Check for Admin Toolbar where the plugin will move the floating menu down to make some additional space for the WordPress admin toolbar. The additional space will only be added for the logged in users.

Step 5

This is the last configuration setting of this plugin which lets you decide whether the navigation bar should stay floating on mobile devices or change to static. Enter the minimum and maximum pixel value in which the floating bar will appear and save all the changes. Now open your website, and you will notice that the navigation bar is now floating.

This was the procedure of making your static navigation bar into a floating one. We will now discuss the manual method below:

Adding a Floating Navigation Menu Manually

The steps to follow are:

Step 1

In the manual method, you need to add custom CSS to your WordPress theme. The latest version of WordPress allows you to add custom CSS codes directly from the admin dashboard.

To add custom CSS, open your WordPress admin dashboard and navigate to the Themes section and click on the Customise tab. Once the WordPress opens the customizer interface, you will see a popup stating you are customising the demo site. Click on the Additional CSS which can be found on the left side of the panel.

Step 2

You will see a tab on the left side where you can add your custom CSS code. Enter the following as the custom CSS and press the Save and Publish button.

#your CSS ID {

background:#fff;

height:60px;

z-index:170;

margin:0 auto;

border-bottom:1px solid #dadada;

width:100%;

position:fixed;

top:0;

left:0;

right:0;

text-align: center;

}

As soon as you enter a valid CSS code, you will notice that the change takes place in the live customizer allowing you to get an idea of how your newly added CSS code might look like.

Note: Do not forget to replace #your CSS ID with the actual CSS ID that you can find through the Step 2 above plugin method.

Adding Custom CSS using a Plugin

Though adding custom CSS through manual method will get the job done, but as soon as you switch the themes, that CSS code will be removed. This mainly occurs because you are adding the CSS code directly in the theme so switching the theme will eliminate all the changes made to the theme. There is one simple method to add custom CSS codes without having the risk of losing the data when switching the themes and that is by using WordPress plugins.

The process is quite simple and works like a charm. All you have to do is install the Simple Custom CSS plugin and activate it. Once the plugin is ready to work, open your WordPress admin dashboard and navigate to Appearance followed by Custom CSS. Paste the same CSS code which you were going to enter in the manual method and click on Update Custom CSS.

It is still advised to use a child theme to add custom CSS codes to avoid any damage to the website.

This was all about the process of adding a floating navigation bar to your WordPress website. Adding this type of bar not only enhances the user experience of your website but makes it easier for your website visitors to find the way on your site.

If you feel any problem in using Sticky Menu (or Anything!) on Scroll, then here are some of the similar plugins that will help you in adding a sticky bar.

#1 WP Floating Menu

The WP Floating Menu allows their users to not only add a floating bar to their website but also makes their website have a one-page navigation menu. You get to choose from five different templates which make your website unique.

You can also select whether you want to apply the entire configuration to a mobile device or not. Some other features of this plugin are menu setting, menu placement, ability to sort menu options, inline navigation, menu icon sets and responsive layout.

This plugin also has a Pro version which comes with some additional premium features like thirteen template layouts, seven menu positions, custom templates, add default pages and posts, and page wise configuration.

#2 myStickymenu

myStickymenu is another excellent plugin developed by M.R.D.A and enjoys a 5-star rating on the WordPress plugin store. It has 20,000+ current users and supports the latest version of WordPress as well.

One great feature of this plugin is that it allows you to add custom CSS code to customise your theme. The plugin supports four languages and has a responsive layout as well. In addition to that, you can limit the width of the header

#3 Float Menu

This plugin allows you to add a floating bar for site navigation, user profile navigation, Skype menu and much more.

Float Menu

You can position floating bars on either left or right side of the website. It allows you to choose a colour for your buttons, customise the menu buttons, insert links, and an option to select from over six hundred Font Awesome icons.

Endnote

With the help of this method, you can easily add a floating navigation bar to your website and attract more visitors. You can make use of any of the plugins mentioned above, and they are sure to provide positive results.

Leave a Reply

Your email address will not be published. Required fields are marked *

CAR DEALERSHIP THEMES FOR 2018

Top 15 Car Dealership WordPress Themes for 2018

THEMES FOR COLLEGE & UNIVERSITY WEBSITES

15 Best WordPress Themes for Colleges and Universities