Have you ever browsed a website and found that a navigation menu is always visible at the top?

In principle, navigation menus are displayed in such a way that they disappear when scrolling the page. The always visible navigation menus float and are so no matter how the user scrolls down.How to create wordpress floating menu 1

In this tutorial, we will show you how to easily create a floating menu on your WordPress blog.

If you have not yet created a website or a blog on WordPress, we invite you to consult How to install a WordPress blog in 7 steps next, How to search, install and activate a WordPress theme on your blog

If it's done, let's get into what concerns us today.

1 Method: How to Add a Floating Menu on WordPress Using a Plugin

This method is easier and is fast. If you have not set up the navigation menus yet, you can learn how to do it.

Sticky menu wordpress plugin

The first thing you need to do is install and activate the plugin " Sticky Menu (or Anything!) On Scroll ". If you do not know how to install a plugin, you can read our tutorial.

After activation, you must visit " Settings »Sticky Menu To configure the settings of this plugin.

Sticky menu wordpress plugin

First, you need to enter the CSS IDs for the navigation menu that you want to float.

You will need to use your browser's "inspect" tool to find the CSS used.

Go to your website and move your mouse to the navigation menu. After that you have to right-click and select "Inspect".

Go further by discovering How to customize a WordPress theme with Yellow Pencil

Inspect a tutorial wordpress code

This will divide (by default) your browser screen, and you will be able to see the source code of your navigation menu. You must find a line similar to this:

In this example, the CSS ID of our navigation menu is " Site Navigation ».

Go ahead and enter the menu's CSS ID in the plugin settings as follows “# site-navigation”.

The next option on the plugin settings is to set the space between the top of the screen and the floating navigation menu. You can use this setting if your menu overlaps with an item that you don't want to be hidden. Otherwise, ignore this setting.

After that you need to click on the box right next to the option: "Check Bar Admin". This allows the plugin to add some space for the WordPress toolbar which is added for logged in users.

The next option in the settings page allows you to hide the navigation menu if a user is visiting your website using a smaller screen, such as a mobile device.

You can test how this menu is displayed on mobile and tablet devices. If you don't like it, you can add 780px on this option.

See also How to create a responsive menu for mobile WordPress

Don't forget to click on the " Save settings To save your changes.

You can now visit your website to see your floating navigation menu in action.

Wordpress float menu

Method 2: How to add a navigation menu manually

This method requires adding custom CSS code to your WordPress theme.

First of all you have to visit " Appearance> Customize To launch the WordPress Customizer.

Additional css wordpress customizer

Click on " Additional CSS In the left pane, then add this CSS code.

# Site-navigation {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; }

Replace " # Site Navigation By the identifier of your navigation menu and click on the button « Save ».

You can now visit your website to see your floating navigation menu in action.

If your navigation menu normally appears after the website header, this CSS code could overlap the website title and the header.

This can be easily adjusted by adding a margin on your header area using the following code:

.site-branding {margin-top: 60px; }

Here ends our tutorial, now you will be able to create or add a floating menu on your website.

If you are looking for other WordPress plugins which will allow you to manage the menus, here are some WordPress plugins premium dedicated to this task. 

1. Menu Hero

This plugin allows you to create your own custom WordPress menu in a few fairly easy steps. In particular, it allows you to easily and intuitively create an elegant and professional WordPress menu. From the most complex feature-rich mega menu, to the simplest drop-down menu, the WordPress Plugin HeroMenu sets up any type of menu and gets it up and running in minutes.

Hero menu responsive wordpress mega menu plugin

In terms of features it offers among other things: perfectly functional on PC, tablet and smartphone, easy to use, customizable content, custom CSS to add your own menu styles, mega menu designer, supported browsers: Chrome, Firefox, Safari , Opera, IE9 and more.

Download | Demo | Web hosting

2. Slick Menu

Slick Menu is not just a menu plugin for WordPress. It can be used to create multiple menu levels in an unlimited way, as well as sidebars with rich content, multiple style options and animated effects.

Slick menu responsive wordpress vertical menu

Each menu level is customizable with background colors, images, videos, custom fonts, and more. This plugin is completely responsive and has over 45 animations for the menu items.

Download | Demo | Web hosting

3. 8Degree Fly Menu

8Degree Fly Menu is a WordPress Plugin premium which allows you to add a canvas menu to your website, in order to give it a look that highlights your information in a simple way. It uses the default WordPress menu feature to create its menus.

8degree fly menu responsive off menu menu plugin for wordpress

You will be able to add additional elements to the default menu items, such as icons, menu slogans, a pseudo-grouping header, and a long description. It also comes with a WYSIWYG editor to help you grasp your long description in a user-friendly way. With this editor you can also use shortcodes.

Download | Demo | Web hosting

Other recommended resources

If you want to go further in creating or customizing the menus of your blog or your website, we also suggest you to consult the links below.

Conclusion

Here ! That's it for this tutorial, I hope it will allow you to add a floating menu to your WordPress blog. We invite you to share this article with your friends on your social networks.

If you have any suggestions or remarks, they will be welcome. And if you're new to WordPress, consult this resource.

...