WoodMart Tutorial: Configuring Sticky Navigation in WordPress: Complete Guide

Sticky Navigation Bar(Sticky Navigation) can enhance website usability, helping visitors navigate more easily and quickly find the content they need. This article will provide you with a step-by-step tutorial to help you implement it.WordPressSet sticky navigation in the theme to enhance website usability.

1. What is a sticky navigation bar?

A sticky navigation bar is a navigation menu fixed at the top of the page. As the page scrolls, it remains permanently visible at the top of the screen. This allows visitors to quickly access the navigation menu at any time, enhancing the browsing experience and increasing content visibility.

2. Define Sticky Navigation Bar Menu

Before setting up a sticky navigation bar, you need to first define amenuThis will be the content displayed in the sticky navigation bar. Please follow these steps:

2.1 Enter Theme Settings

• Step 1In the WordPress backend, go toTheme SettingPage.
• Step 2: FindSticky Navigation BarSet options inSelect MenuIn the field, select the menu you want to use as the sticky navigation bar.

2.2 Create and Save the Menu

• Step 3: Go toAppearance > MenuSelect your menu. If the menu is empty, you can add product categories or other relevant content.
• Step 4After adding menu items, clickSave menuEnsure the settings take effect.

3. Configure the menu in the sticky navigation bar

Next, you will delve into the configuration menu to meet the display requirements for the sticky navigation bar.

3.1 Configuration Menu Items

• Step 1: EnterAppearance > MenuSelect the menu you created and add the desired menu items. For example, you can addproduct category(math.) genusAbout UsmaybeContact UsMenu items.
• Step 2: ClickSave menuto ensure all settings are saved correctly.

3.2 Adding Dropdown Menus

To make the sticky navigation bar more interactive, you can add dropdown menus to certain menu items:

• Step 3Insert aHTML blockand set it toFull-height design(Width: 270px, Padding: 20px).
• Step 4: Enablepass (a bill or inspection etc)AjaxLoad HTML dropdown menuTo reduce the load on page loading, especially when dropdown menus contain extensive content, using Ajax can optimize performance.

4. Ensure the sticky navigation bar displays correctly.

To ensure the sticky navigation bar displays correctly, you need to addicon (computing)respond in singingimageryThis way, the menu items will display correctly as designed.

• Step 1Select an appropriate icon or image for each menu item.

• Step 2Save settings, check the front-end page to ensure menu items display correctly.

5. Customize the title of the sticky navigation bar

You can set a custom title for the sticky navigation bar to better reflect your website's content.

5.1 Set Navigation Bar Title

• Step 1: inTheme Settinghit the nail on the headcaptionFields.
• Step 2Enter the title you wish to display (e.g., "Product Categories").
• Step 3Save settings: The sticky navigation bar on the front-end page will display the title you set.

6. Add additional information to the bottom of the sticky navigation bar

If you need to add information to the bottom of the sticky navigation bar (such as contact details, customer service phone numbers, etc.), you can do so byBottom ContentFields to achieve.

• Step 1: EnterTheme SettingFindBottom ContentFields.
• Step 2Add any additional information you wish to display, ensuring it aligns with the website's design.

7. Configure sticky navigation bar in the header builder

In WordPress's Header Builder, you can further customize the appearance and functionality of the sticky navigation bar.

7.1 Configure the Header Navigation Bar

• Step 1: Enterhead builderFront-end mode.

• Step 2: SelectionDisplay AreaYou can choose to displayIcon onlymaybeIcon + TextThe
• Step 3Customize the design and color of icons to match the website's style.

7.2 Custom Menu Icons

• Step 4You can upload custom icons to replace the default hamburger menu icon, making it more personalized.
• Step 5: EnableMouse event opens menuOptions, allowing users to open or close the menu via mouse events.

8. Final result: Completed sticky navigation bar

After completing all settings, the sticky navigation bar has been successfully configured. Visitors will always see the navigation menu while scrolling through the page, with menu items, icons, headings, and other elements customized according to your requirements.

• With these settings, the sticky navigation bar not only enhances the website's usability but also enables visitors to quickly access desired content, thereby improving the browsing experience.

reach a verdict

Sticky Navigation BarConfiguring this feature is an effective way to enhance website usability. By following the steps outlined in this article, you can easily implement this functionality and provide your website users with a smoother browsing experience. If you have any questions or need further assistance, feel free to leave a comment below, and we'll get back to you as soon as possible.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off