How to create a fixed floating navigation menu in WordPress

Recently one of our users asked us how to create a permanent navigation menu for their website?

Fixed navigation menus are still visible on the screen as the user scrolls down the page. This makes the top menu always visible, which is good for the user experience as it contains links to the most important sections of your site.

In this article, we will show you how to easily create a fixed floating navigation menu in WordPress.

Creating a sticky floating navigation menu in WordPress

What is a fixed floating navigation menu?

A fixed or floating navigation menu is a menu that ‘sticks’ to the top of the screen when the user scrolls down. This makes your menu visible to the user at all times.

Here is a hot menu in action. We’ll show you how to create a menu exactly like this for your own website:

A sticky navigation menu in action on our demo website

Why and when can sticky menus be useful?

Usually, the top navigation menu contains links to the most important sections of the site. The floating menu makes those links always visible, saving the user from having to scroll back to the top of the page. It has also been shown to increase conversions.

If you run an online store, your top navigation menu probably includes links to shopping cart, product categories, and product search. Making this menu appealing can help you reduce cart abandonment and increase sales.

Some of our best WordPress themes have built-in support for fixed navigation menus. Simply view your theme settings in Themes » Customize to enable it.

If your theme doesn’t have this option, continue reading and we will show you how to easily create a permanent floating navigation menu in any WordPress theme or WooCommerce store.

Method 1: Add your attractive floating navigation menu with plugin

This is the easiest method. We recommend it to all WordPress users, especially for beginners.

If you haven’t set up your navigation menu yet, go ahead and do it using our guide on how to add a navigation menu in WordPress.

Then you need to install and activate Sticky Menu (or Anything!) on the Scroll plugin . For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Sticky Menus (or Everything!) page to configure plugin settings.

The Sticky Menu plugin's settings page

First, you need to enter the CSS ID of the navigation menu you want to style.

You will need to use your browser’s inspection tool to find the CSS ID used by your navigation menu.

Just go to your website and take your mouse to the navigation menu. Then you need to right-click and select Inspect from the browser’s menu.

Inspecting the navigation menu element on your website

This will split your browser screen in half and you will be able to see the source code for your navigation menu.

You need to find a line of code related to your site’s navigation or header. It will look like this:

Nếu bạn đang loay hoay tìm nó, hãy đưa con trỏ chuột qua các dòng mã khác nhau trong ngăn Kiểm tra. Menu điều hướng sẽ được đánh dấu hoàn toàn khi bạn có dòng mã phù hợp:

Finding the navigation menu ID using the inspect tool

Trong trường hợp này, ID CSS của menu điều hướng của chúng tôi là site-navigation .

Tất cả những gì bạn cần làm là nhập ID CSS của menu vào cài đặt plugin với một mã băm ở đầu. Trong trường hợp này, đó là # site-navigation .

Entering the ID of the element that you want to make sticky (in this case, the navigation menu)

Don't forget to click the 'Save Changes' button at the bottom of the page.

Now, go ahead and test your permanent menu directly on your WordPress site. It will stay on the page when you scroll down, like this:

Viewing the sticky menu on your website

The next option on the plugin's settings page is to define the space between the top of your screen and the permanent navigation menu. You only need to use this setting if your menu overlaps an element that you don't want to hide. Otherwise, ignore this setting.

We recommend leaving the check box next to the option: 'Check the Admin Bar'. This allows the plugin to add some space to the WordPress admin bar, visible only to logged in users.

Here you can see that the admin bar on our test site is displaying correctly above the permanent menu:

The WordPress admin bar appears above the sticky menu

The next option allows you to unmark the navigation menu if the user is accessing your site on a smaller screen, such as a mobile device:

The sticky menu plugin offers further options too

You can test how your website looks on a mobile device or a tablet. If you don't like how it looks, just add 780px to this option.

Don't forget to click the Save Changes button after making any changes to your preferences.

Method 2: Manually add fixed floating navigation menu

This method requires you to add custom CSS code to your theme. We do not recommend it for beginners.

We also recommend that you check out our guide on how to easily add custom CSS to your WordPress site before getting started.

First, you need to visit Appearance » Customize to launch the WordPress theme customizer.

Adding custom CSS in WordPress theme

Next, click on 'Additional CSS' in the left pane and then add this CSS code.

#Navigation Site { background: # 00000;  height: 60px;  z-index: 170;  margin: 0 auto;  border-bottom: 1px solid #dadada;  width: 100%;  position: fixed;  top: 0;  left: 0;  true: 0;  text-align: center;  }

Note: This will create a navigation menu with a black background. If you want a different color, change the number next to the background. For example, using background: #ffffff will give you a white menu background.

Simply replace #site-navigation with the CSS ID of the navigation menu, then click the Publish button at the top of the screen.

Go ahead and visit your website to see your fixed floating navigation menu in action:

A sticky / floating navigation menu created using CSS

What if your navigation menu often appears below the site title instead of above it? If so, this CSS code could overlap the site's header and headers or appear too close to it before the user scrolls:

The sticky navigation menu is slightly overlapping the site title

This can be easily adjusted by adding a margin to your header area using some extra CSS code:

.site-thương hiệu {
margin-top: 60px! important;

Replace site-branding with the CSS class of your title area. The fixed navigation menu will now no longer overlap your header before the user scrolls down:

There's now room for the title below the sticky navigation menu

We hope this article helped you add a permanent floating navigation menu to your WordPress site. You may also want to check out our guide on how to create a custom WordPress theme without writing any code and our comparison of the best WordPress page builder plugins.


Categorized as Wordpress

By Nguyen Manh Cuong

Nguyen Manh Cuong is the author and founder of the nguyendiep blog. With over 14 years of experience in Online Marketing, he now runs a number of successful websites, and occasionally shares his experience & knowledge on this blog.

Leave a comment

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