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.
Table of Contents
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:
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.
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.
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:
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 .
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:
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 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:
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.
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:
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:
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:
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.
.
