Creating Custom Navigation Menus in Showit

Your website’s navigation menu plays a crucial role in user experience, helping visitors easily access important pages, explore your blog, and navigate through different sections. Showit, a flexible website builder, allows you to create custom navigation menus that are both stylish and functional.

In this guide, you will learn to create dropdown menus, customize desktop settings and mobile settings, and fine-tune your navigation bar for seamless browsing. Whether you’re designing from a blank canvas or editing an existing site canvas, you’ll learn how to optimize your menu design for both desktop and mobile devices.

---

Understanding Showit Navigation Menus

Before diving into the menu creation process, let’s understand how navigation works in Showit:

• Navigation menus in Showit are built on canvas settings.
• A site canvas allows you to create a menu once and apply it across multiple pages.
• Menus can be customized separately for desktop and mobile using specific desktop settings to ensure a seamless user experience.
• You can use a blank canvas to start from scratch or edit an existing menu item setup.

Understanding Menu Design

Menu design is a crucial aspect of website design, as it helps visitors navigate and find the information they need. A well-designed menu can significantly improve user experience, increase engagement, and enhance the overall look and feel of your Showit website. When designing a menu, it’s essential to consider the website’s purpose, target audience, and content structure. A good menu design should be intuitive, easy to use, and visually appealing.

In Showit, menu design can be customized using various elements, such as images, texts, and icons. Users can leverage the Canvas View feature to create multiple views of their menu. For instance, you can design a “Closed Menu” view (what users see before clicking the hamburger icon) and an “Open Menu” view (what appears after clicking the hamburger icon). This flexibility allows you to create a dynamic and user-friendly navigation experience that adapts to your visitors’ needs.

---

Setting Up a Custom Navigation Menu in Showit

To create a custom menu, follow these steps:

Step 1: Creating a New Site Canvas for Navigation

1. Open your website and navigate to the site canvas section.
2. Click the three dots next to “Site Canvases” and select create new.
3. Name it something recognizable like Main Navigation or Custom Menu.

Step 2: Adding Menu Items

1. Click add element → text box to create menu links (e.g., “Home,” “About,” “Services”).
2. Use the drag feature to arrange them in the preferred order.
3. Set up click actions to link each menu item to its corresponding page.
4. Adjust canvas height and canvas type to fit your design.

Step 3: Styling the Navigation Bar

• Customize font, color, and spacing for better readability.
• Add a logo to your menu for branding consistency.
• Use a rectangle or underline effect to highlight active menu items.

---

Creating Dropdown Menus in Showit

If you want to create dropdown menus in Showit, follow these steps:

1. Add a New Canvas for the Dropdown
   • Click create → blank canvas → Name it (e.g., “Dropdown Menu”).
2. Design the Dropdown Structure
   • Add a text box for each menu item in the dropdown.
   • Customize the stacking order so that items appear properly.
3. Set Click Actions for the Dropdown
   • Select the main navigation bar text.
   • Under click action, set it to toggle → dropdown menu canvas.
4. Adjust Visibility for Desktop and Mobile
   • In the canvas settings, make sure the dropdown is visible only when activated.
   • Use the x icon to create a close button for the dropdown.

---

Customizing Navigation Menus for Desktop and Mobile

Showit allows you to design separate navigation menus for desktop and mobile devices. It is crucial to customize the desktop view using desktop settings, including options for sticky navigation and ensuring specific elements are visible only in the desktop layout.

A. Desktop Version

• Ensure the navigation bar is placed within the header for a consistent look.
• Adjust the canvas view so that menu items are easily accessible.
• Make sure links to important pages, blogs, and categories are clearly displayed.
• Customize desktop settings to enhance the navigation experience by implementing sticky navigation, ensuring specific elements are visible only in the desktop layout, and adjusting the appearance and functionality of navigation elements.

B. Mobile Version

• Instead of a full navigation bar, use a hamburger menu for better mobile usability.
• Add an x icon to close the menu easily.
• Use a drop animation to make the menu appear smoothly.
• Make sure all elements are visible and easy to tap on mobile screens.

---

Enhancing Navigation with Showit Features

To make your menu design more interactive, consider these enhancements:

• Add scroll actions so the menu changes when the user scrolls.
• Customize the menu item style for a modern look.
• Use subtle hover effects to highlight menu items.
• Implement stacking order techniques for a clean layout.

Adding an X Icon to Your Menu

Adding an X icon to your menu is a great way to provide visitors with a clear way to close the menu. In Showit, you can easily add an X icon using the Text Box element. Here’s how to do it:

1. Go to the Canvas View where you want to add the X icon.
2. Click on the Text Box element and drag it to the desired location.
3. Type “X” in the text box and adjust the font size and style as needed.
4. Set the click action for the X icon to “Canvas” and choose the “Closed Menu” view.

By following these steps, you ensure that the menu will close when the X icon is clicked, providing a seamless and intuitive user experience.

---

Editing and Refining Your Custom Menu

Once you’ve built your custom navigation menu, it’s important to test it:

1. Preview your site: Check the desktop version and mobile settings.
2. Adjust text and icon spacing for readability.
3. Ensure that all links work and direct users to the correct pages.

Test the dropdown menu and make sure it opens and closes correctly.

---

Best Practices for Creating Custom Navigation Menus

Creating custom navigation menus can greatly enhance the user experience and improve the overall look and feel of your Showit website. Here are some best practices to keep in mind:

1. Keep it Simple: Avoid cluttering your menu with too many options. Keep the most important links prominent and easy to find.
2. Use Clear and Concise Language: Use simple and descriptive language for your menu items. Avoid using jargon or technical terms that may confuse visitors.
3. Make it Mobile-Friendly: Ensure that your menu is optimized for mobile devices. Use mobile settings to adjust the menu design and layout for smaller screens.
4. Use Visual Hierarchy: Use size, color, and position to create a visual hierarchy in your menu. This will help visitors quickly understand the menu structure and find what they need.
5. Test and Iterate: Test your menu with real users and iterate on the design based on feedback.

By following these best practices, you can create a custom navigation menu that is both functional and visually appealing, enhancing the overall user experience on your website.

---

Troubleshooting Common Issues with Custom Menus

Custom menus can be finicky, and issues can arise when designing and implementing them. Here are some common issues and solutions:

1. Menu Not Showing Up on Mobile Devices: Check your mobile settings and ensure that the menu is set to display on mobile devices.
2. Menu Items Not Linking Correctly: Check the click actions for each menu item and ensure that they are set to the correct page or canvas view.
3. Menu Design Not Displaying Correctly: Check the canvas settings and ensure that the menu design is set to display correctly on different devices and screen sizes.
4. Menu Not Closing When X Icon is Clicked: Check the click action for the X icon and ensure that it is set to the “Closed Menu” view.

By following these troubleshooting tips, you can resolve common issues and ensure that your custom navigation menu functions smoothly, providing a seamless user experience.

Need help with your Showit site? Contact us through this form.