This guide details the creation of navigation menus for your site made with Site Creator Infomaniak, as well as their composition, styles and parameters.

Prerequisites

• Access Site Creator:
  1. Click here to access the management of your product on the Infomaniak Manager (need help?).
  2. Click directly on the name assigned to the relevant product.
  3. Click on Customize my site:
     

The different navigation menus

The different pages that make up your site can be accessible within one or more navigation menus:

1. Click on the Settings button in the left sidebar.
2. By default, the list of your pages appears, classified into 2 main sections: MAIN MENU and LEGAL.

But you can add more.

These menus, along with the pages they contain, are then displayed in various locations on your site depending on the chosen theme, among other factors.

You will often find the main menu at the top of the page:

and the other menus will be automatically suggested in the footer:

Manage the menu

You can manage its presence in the site map or delete it (along with all its pages):

1. Click on the Settings button in the left sidebar.
2. Hover over a menu title in the existing tree structure.
3. Click on the gear icon that appears on hover.

Refer to this other guide to prevent any menu from appearing at all.

Create a sub-element in a menu

For this:

1. Click on the Settings button in the left sidebar.
   • Your list of pages appears.
2. With the mouse, move a page slightly to the right under another page:
   
   
    
   • It will become a sub-page and your menu on the site will be able to display the resulting tree structure.
      

Non-clickable menu title

If necessary, choose to make the very first element of such a menu not clickable:

1. Click on the Settings button in the left sidebar.
2. Click on General Settings to modify this setting under Submenu Options:
   

Menu item containing a link to another website

For this:

1. Click on the Settings button in the left sidebar.
   • Your list of pages appears.
2. Click on the Add a page button below the existing tree structure:
   
3. Choose a page name and Show more options.
4. Choose the URL redirection to specify the destination upon click:
   

Add a new menu

For this:

1. Click on the Settings button in the left sidebar.
2. Hover over a menu title in the existing tree structure.
3. Click on the "+" icon that appears on hover:
   

Additional top menu

To display a "menu bar" at the very top of your page:

1. Click on the Design button in the left sidebar.
2. Click on More settings.
3. Enable the Header Menu Bar:
   
   • Once enabled, you can customize it using the Settings link in the same place.

Menu styles

To manage the different menu styles:

1. Click on the Design button in the left sidebar.
2. Click on Menu editor:
   
   ‍

You can decide the location of your menus (on the left of the page or placed at the top, fixed or mobile, type "hamburger menu ☰" on the right or normal, etc.).
 

Change the color of the "hamburger" menu (☰)

If this three-line horizontal menu button ☰ appears, for example, white on white on a mobile device:

1. Click on Menu title / logo (always under Design, then Menu editor).
2. Adjust the text color:
   

Adopt a new menu theme

Completely change the predefined style using the themes at the very top of the submenu:

1. Click on Menu Templates (always under Design, then Menu Editor):
   

Fixed menu

Most of the menus offered will move with the page content. The menu disappears if you scroll down the page:

You can set a menu that will always be fixed at the top (with various visual options):

To enable or disable the fixed menu:

1. Click on Design.
2. Click on Menu editor:
   
3. Click on Main configuration.
4. Choose In the header in the Menu type box.
5. The toggle switch button Fixed at the top appears lower and you can activate it.
6. Click on Save:
   

Some menu models (like the #3 and the #16) directly apply the optimal settings for a fixed menu:

Insert your menus into the body of the page

A module Subpage Menu allows you to insert your menus and submenus anywhere on your page.

The site map displays all menus and all your pages in a single block.

Set the page URL

By default, if the name of your page is Contact then the URL to reach it will be www.domain.xyz/contact.

If you later change the page name to Contactez-nous then the URL will be www.domain.xyz/contactez-nous.

To set the custom URL of the page you are on:

1. Click on the Settings button in the left sidebar.
2. Click on SEO & Metadata (under Settings for this subpage):
   

The first field at the top allows you to set the page address. Any space will be converted into a hyphen, and special characters, accents, symbols, etc., should be avoided.

If URL changes are recorded during site creation while a menu already contains a link to the page in question, it will be dynamically adjusted.