Skip to Main Content

How to create a floating menu on WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

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 haven't created a website or blog on WordPress, we invite you to consult How to Install a WordPress Blog in 7 Steps then, 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 ».

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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 ».

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

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 that will allow you to manage menus, here are some premium WordPress plugins dedicated to this task. 

1. Menu Hero

This plugin allows you to create your own personalized WordPress menu in a few easy steps. It allows you to easily and intuitively create an elegant and professional WordPress menu. From the most complex mega menu full of features, to the simplest menu with 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 premium WordPress plugin that allows you to add a canvas menu to your website, in order to give it a look that highlights and easily your information. It uses the default WordPress menu function 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.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

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.

...  

This article features 7 comments

  1. Hello,

    First of all, thank you for this tutorial which does the job perfectly!
    But no matter how hard I searched the net, I couldn't find the answer to my question:
    How do I do, once the floating menu is created (in CSS or with the extension, whatever), so that my sections appear after the menu and not behind the menu?
    It is particularly annoying in my case because it is an onepage and the items of my menu therefore refer to sections of the pages, which go up each time behind my menu ...

    does it speak to you?

    Thanks in advance !

      1. Hello; Hi

        I tried with a downloaded theme (wallstreet) but, while following your instructions, nothing changes… I don't know what is missing…
        I like it and I wish I could use it ...

        Thank you
        Raul

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
5 shares
Share2
tweet
Save3