This tutorial explains how to create navigation menus for your website built with Infomaniak's Site Creator, as well as how to configure their layout, styles, and settings.

The different navigation menus

Start by logging in to the Infomaniak Manager with your credentials (user account with the necessary permissions for the relevant product):

1. Click here to access the hosting & site management interface (filtered to display only Site Creator).
   • If nothing is displayed, you may not be in the Organization to which your site is linked (❓: help).
2. Click on the name of the Site Creator in question:
   
3. Click on the button to edit your site:
   

Once in Site Creator, the different pages that make up your site can be accessed within one or more navigation menus:

1. Click on the Settings button in the left-hand menu.
2. By default, the list of your pages appears, organized into 2 main categories: MAIN MENU and LEGAL:
   

But you can add several more.

These menus, along with the pages they contain, are then used in various locations on your site, depending in particular on the theme chosen:

• You will often find the main menu placed at the top of the page:
  
• and the other menus will be automatically displayed in the footer:
  

Manage menus

Add a new menu

To do this:

1. Click on the Settings button in the left-hand menu.
2. Hover over a menu title in the existing tree.
3. Click on the "+" icon that appears when you hover over it:
   

You can manage the presence of the menu in the sitemap or delete it (along with all its pages):

1. Click on the Settings button in the left-hand menu.
2. Hover over a menu title in the existing tree and click on the gear icon that appears on hover:
   
3. Choose the desired settings and validate at the bottom of the page:
   

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

Create a submenu item

To do this:

1. Click on the Settings button in the left-hand menu.
   • The list of your pages will appear.
2. Using your mouse, move a page slightly to the right, placing it under another page:
   
   • It will become a sub-page, and your website menu will be able to display the tree structure you have created:
     
   • Also, take note of the tip below…

Non-clickable menu title

If necessary, choose to not make the very first item of a menu with submenu items clickable (as configured above):

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

Menu item containing a link to another site

To do this:

1. Click on the Settings button in the left-hand menu.
   • The list of your pages will appear.
2. Click on the Add page button below the existing tree:
   
3. Enter a page name and click on Show more options.
4. Choose the URL redirection to specify the destination when clicked:
   

Additional top menu

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

1. Click the Design button in the left-hand menu.
2. Click on More settings.
3. Enable the Header menu bar:
   
4. Once activated, you can customize it using the Settings link in the same location:
   

Menu styles

To manage the different menu styles:

1. Click on the Design button in the left-hand menu.
2. Click on Menu Editor:
   
3. Then click on Settings:
   
4. You can, for example, decide on the location of your menus (on the left side of the page or placed at the top, fixed or mobile, "hamburger" menu type on the right or normal, etc.):
   

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

If this menu button with three horizontal lines ☰ appears, for example, in white on a white background on a mobile device:

1. Click on the Design button in the left-hand menu.
2. Click on Menu editor.
3. Click on Menu title / logo.
4. Adjust the text color:
   

Adopt a new menu theme

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

• Click on Menu Templates (still under Design, then Menu Editor):
  

Fixed menu

Most of the menus will move with the page content.

• The menu disappears as you scroll down the page:
  
  
  
• You can define a menu that should always be fixed to the top edge (with different visual options):
  
  

To enable or disable the fixed menu:

1. Click on Design.
2. Click on Menu Editor.
3. Click on Main Settings.
4. Choose In the header in the Menu type box.
5. The Fixed to top toggle switch appears further down, and you can enable it.
6. Click on Save:
   

Some menu templates (such as #3 and #16) directly apply the optimal settings for a fixed menu.

Insert your menus into the page body

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

• Add the element from the Apps:
  

The sitemap module displays all menus and all your pages in a single block.

Define the page URL

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

If you later change the page name to Hello, the URL will be www.domain.xyz/hello.

To define the custom URL for the page you are currently on:

1. Click on the Settings button in the left-hand menu.
2. Click on SEO & Metadata (under Settings for this subpage).
3. The first field at the top allows you to define the page address. Any space will be converted into a hyphen, and special characters, accents, symbols, etc. should be avoided:
   

If URL changes are saved while creating a website and a menu already contains a link to the page in question, the link will be updated dynamically.