Sorting the menu items in your website’s navigation is essential for improving user experience and guiding visitors to the most important pages. Whether you’re using OzSpeed’s Website Builder or a Content Management System (CMS) like WordPress, this guide will help you easily reorder your menu items.
Step 1: Access the Menu Editor #
To rearrange the items in your navigation menu, you first need to open the menu editor.
Using Website Builder: #
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Click on Navigation Menu in the top toolbar.
Using WordPress: #
- Log in to your WordPress Admin Dashboard.
- Go to Appearance > Menus.
- Select the menu you want to edit from the dropdown list and click Select.
Tip: #
- If you have multiple menus (e.g., Primary Menu, Footer Menu), make sure you’re editing the correct one.
Step 2: Drag and Drop Menu Items #
The simplest way to reorder the items in your navigation menu is by using the drag-and-drop feature.
In Website Builder: #
- Click on the menu item you want to move.
- Drag it to the desired position in the list.
- Release the item to place it in the new order.
- Click Save to apply the changes.
In WordPress: #
- Click and hold the menu item you want to move.
- Drag it up or down to reorder it in the list.
- Indent the item slightly if you want it to appear as a sub-item in a dropdown menu.
- Click Save Menu.
Tip: #
- Place important pages (e.g., Home, Services, Contact) near the top of the menu for better visibility.
Step 3: Preview the Changes #
Before making the changes live, preview your website to ensure the new menu order looks good and functions correctly.
How to Preview: #
- Click Preview in the Website Builder or WordPress editor.
- Check the navigation menu on both desktop and mobile views.
- Make sure all links lead to the correct pages.
Tip: #
- Use an incognito window or clear your browser cache to see the changes without cached data.
Step 4: Test the Navigation Menu #
After sorting the menu items, test the navigation to ensure everything works as expected.
Testing Checklist: #
- Check All Links: Click on each menu item to verify it navigates to the correct page.
- Test Dropdown Menus: If you have dropdown items, hover over the parent item and check that the sub-items appear correctly.
- Check Mobile Responsiveness: Open your website on a mobile device to ensure the navigation menu is responsive and easy to use.
Tip: #
- Consider using a hamburger menu icon on mobile devices for a cleaner layout.
Step 5: Optimize the Menu Order for User Experience #
To improve user experience, place the most frequently visited pages at the beginning of the menu.
Suggested Menu Order: #
- Home
- About Us
- Services or Products
- Blog or Portfolio
- Contact Us
- FAQs or Support
Tip: #
- Use analytics data to determine which pages are most popular and adjust the menu order accordingly.
Troubleshooting Tips #
- Changes Not Visible:
- Clear the website cache in hPanel and your browser cache.
- Ensure you saved the changes in the menu editor.
- Menu Items Not Reordering:
- Check if you have any custom code or plugins affecting the menu order.
- Disable conflicting plugins temporarily to see if the issue is resolved.
- Dropdown Menu Not Displaying Correctly:
- Ensure sub-items are correctly indented under the parent item.
- Test the dropdown functionality on different devices and browsers.
Additional Tips: #
- Use Descriptive Names: Ensure that menu items are clearly labeled to help visitors understand what each link leads to.
- Keep It Simple: Avoid overcrowding the navigation menu with too many items. Stick to 5-7 main links for a cleaner look.
- Monitor User Behavior: Use tools like Google Analytics to see which menu items are most frequently clicked and adjust the order if necessary
