Compatibility:

WebSite X5 Evo and Pro

When creating a responsive website, one of the most important elements to optimize is the navigation menu. While on desktop the structure can be wide and complex, on smartphones and tablets the available space is significantly reduced: a non-adapted menu can compromise navigation, usability, and user experience.


In WebSite X5, the menu automatically adapts to different resolutions thanks to the responsive system and the Hamburger Menu, but to achieve truly effective navigation it is important to check the menu structure and behavior based on the different breakpoints.


Why the responsive menu is essential

Before proceeding, remember that only a well-optimized menu allows you to:

  • improve navigation on smaller screens;
  • make it easier to access the main sections of the site;
  • avoid visual overload;
  • maintain clarity and order;
  • improve the overall user experience.


The goal is to make navigation simple, intuitive, and functional regardless of the device used.


How to properly structure the menu

The key steps to create a responsive menu are as follows:

1. Create the Sitemap

First, you need to build the site map because the menu automatically draws its items from it:

  • Go to Step 3 - Sitemap.
  • Organize pages and levels logically.
  • Carefully define names and hierarchies.


#tip - For more information, see How do you create the sitemap?


2. Set up the Menu

Once the Sitemap is defined, you can use the Menu Object to create the actual menu. You can decide where to place it: 

  • In the Template Header: this is the recommended solution. You create the menu once and it appears identically on all pages. This saves time and ensures consistent and uniform pages.  
  • In the Sidebar: ideal for vertical menus. Keep in mind that when space is limited, a sidebar can become difficult to manage.
  • Within pages: useful for local or support menus, but less suitable for the main navigation menu.


 In most cases, therefore, to create the main navigation menu you should proceed as follows: 

  • Go to Step 2 - Template > Template Content > Header.
  • Insert the Menu Object.
  • Configure size, position, and style.


#tip - For more information, see How do you work with the Menu Object?


3. Configure behavior at breakpoints

  • Use the Responsive Bar in the Template Content window to check the different views.
  • Check how the menu adapts to lower resolutions.
  • Reduce the size of the Menu Object according to the available space and move it so that it is not "covered" by other Objects: otherwise, the menu items will not be clickable.

4. Check the Hamburger Menu

  • The Hamburger Button is automatically activated when the available space is no longer sufficient to display all menu items. 
  • Use the Responsive Bar to check at which breakpoints it appears and adjust its size and position if necessary.
  • Open the Menu Object settings window to adjust the style of the Hamburger Button. 


Further improve navigation with the Sticky Bar

If you want to make the menu even more accessible during navigation, you can integrate a responsive Sticky Bar.


The Sticky Bar is a bar that remains visible while scrolling the page, anchored to the top of the browser window. It usually includes the main elements of the Header, such as:

  • main menu;
  • logo;
  • strategic links;
  • contact buttons or CTAs.


This tool allows you to:

  • keep navigation always accessible;
  • improve usability and navigation continuity;
  • facilitate quick access to main sections;
  • enhance the user experience, especially on mobile devices.


To configure it:

1. Enable the Sticky Bar

  • Go to Step 2 - Template Settings > Sticky Bar.
  • Enable the Show a top bar option.

2. Define appearance and content

  • Configure appearance and content in the General and Content sections.
  • Include only elements that are truly useful for navigation.

3. Optimize responsive behavior

  • Use the Responsive Bar to adapt visibility and content to different breakpoints.
  • Evaluate which Objects to keep or hide in smaller views.


#tip - The Sticky Bar should maintain essential navigation: prioritize logo, menu, and strategic functions while avoiding overcrowding the available space, especially on smartphones. For more information, see Sticky Bar. How do you create a navigation bar that is always visible during scrolling?


Practical tips for an effective responsive menu

Designing a responsive menu correctly means finding the right balance between content completeness, ease of navigation, and usability across different devices.


A menu that is too complex or poorly optimized can quickly compromise the user experience, especially on smartphones, where space and speed of access become priorities.


To achieve better results:

  • keep the structure simple and hierarchically clear;
  • limit the number of main items and organize content by priority;
  • avoid menus that are too long or deeply nested;
  • use short and easily understandable labels;
  • check readability, button size, and ease of interaction;
  • verify menu behavior at different breakpoints;
  • test navigation on real smartphones and tablets;
  • use the local Preview to identify any issues before publishing.


In summary

The responsive menu is one of the most important aspects in designing an effective website.


With WebSite X5, you can adapt navigation to different devices without working on code, improving usability, accessibility, and the overall quality of the project.


A well-designed menu makes the site more professional, easier to use, and more effective on any device.