Would you like to implement a persistent floating navigation menu in your WordPress website?
The top navigation menu typically features links to the most crucial pages of your site. By applying a “sticky” feature to this menu, you can ensure it remains on the screen as users scroll down the page, providing easy access throughout their browsing experience. This article demonstrates how to effortlessly incorporate a sticky floating navigation menu into your WordPress website.
Understanding the Concept of a Sticky Floating Navigation Menu
A sticky or floating navigation menu remains affixed to the top of the screen while users scroll, ensuring its continuous visibility. Typically, the top navigation menu in WordPress contains links to the most significant content on your website. By making this menu sticky, visitors can access these links without the need to scroll. In the case of an online store, the top navigation menu often contains links to critical pages that drive conversions, such as the checkout page and customer cart. Implementing a sticky top menu can help minimize cart abandonment rates and potentially boost sales.
Method 1: Implementing a Sticky Menu Using Theme Settings (Simple Approach)
Several top-tier WordPress themes come with native support for sticky navigation menus. Therefore, it is prudent to explore your theme’s settings by navigating to Themes » Customize in the WordPress dashboard and examining settings denoted as ‘Menus.’ In case you are uncertain about your theme’s compatibility with sticky menus, it is advisable to refer to the theme’s documentation or directly contact the developer for assistance. For further guidance, please refer to our comprehensive guide on effective ways to seek WordPress support and receive prompt assistance. Should your theme lack built-in support for sticky menus, alternative methods outlined below will be necessary.
Method 2: Implementing a Sticky Navigation Menu Using a Plugin (Recommended)
The most straightforward approach to creating a sticky navigation menu in WordPress involves utilizing the “Sticky Menu (or Anything!) on Scroll” plugin. This versatile plugin enables you to affix various elements, including menus, in a sticky position.
To begin, install and activate the plugin. If you require assistance with this process, refer to our comprehensive guide on installing a WordPress plugin.Once activated, navigate to Settings » Sticky Menu.
To initiate the setup, you’ll need to obtain the CSS ID of the navigation menu you intend to make sticky using your browser’s inspect tool. Simply visit your website, hover your mouse over the navigation menu, right-click, and choose ‘Inspect’ from the browser’s menu.
This action opens a new panel within the browser, displaying the source code for the navigation menu. Locate the relevant line of code associated with the menu or your site header. It will resemble something similar to this:
Method 3: Implementing a Sticky Floating Navigation Menu Using Code
Alternatively, you can develop a sticky navigation menu using CSS. An effective approach to incorporating custom code into WordPress is through WPCode. WPCode stands out as a premier code snippet plugin, enabling seamless integration of custom CSS, PHP, HTML, and more. By avoiding direct alterations to theme files, you mitigate the risk of encountering common WordPress errors. Furthermore, this method allows for theme updates or transitions to different themes without compromising custom code integrity. Additionally, you can effortlessly toggle the sticky menu on and off with a single click. To begin, install and activate the WPCode plugin, which is available at no cost. Detailed steps for installation can be found in our comprehensive guide on installing a WordPress plugin. Once the plugin is successfully activated, proceed to Code Snippets » Add Snippet.
If you encounter difficulty in identifying the code, simply hover your mouse over various lines of code within the ‘Inspect’ panel. The browser will visually highlight the navigation menu when the correct code is selected, as illustrated in the image below.
In this particular instance, the CSS ID for the navigation menu is identified as “site-navigation.”
Once you have obtained this information, return to your WordPress dashboard and input it into the ‘Sticky Element (Required)’ field. Additionally, ensure to prepend a hash character (#) at the beginning, effectively rendering “site-navigation” as “#site-navigation.”
Subsequently, click on the ‘Save Changes’ button located at the bottom of the page to preserve your modifications.
Here, you will find a collection of ready-made WPCode snippets that can be integrated into your website. These snippets encompass various functionalities, such as disabling comments, allowing file types not typically supported by WordPress, deactivating attachment pages, and more.
Moving on to the subsequent screen, simply hover your mouse over ‘Add Your Custom Code (New Snippet)’ and click on the ‘Use snippet’ button once it appears.
On the subsequent screen, proceed to provide a title for the code snippet. This title is solely for your personal reference, allowing you the freedom to choose any identifier you prefer.
Next, access the ‘Code Type’ dropdown menu and opt for ‘CSS Snippet.’
This will generate a navigation menu featuring a black background. You have the flexibility to select any color of your choice by modifying the hexadecimal code adjacent to the ‘background’ property.
For instance, using ‘background: #ffffff’ will yield a menu with a white background. In case you’re uncertain about the appropriate hex code to use, you can refer to resources like HTML color codes.
Additionally, you need to substitute ‘#site-navigation’ with the CSS ID corresponding to your navigation menu. To acquire this code, simply follow the same procedure outlined above.
Once you’re content with the code, toggle the switch from ‘Inactive’ to ‘Active’ and proceed to click on the ‘Save Snippet’ button.