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

Prerequisites

• Access Site Creator:
  • Click here to access the management of your product on the Infomaniak Manager (need help?).
  • Click directly on the name assigned to the relevant Site Creator.
  • Click the button Edit my site to start the editor:
    

The different navigation menus

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

1. Click the Settings button in the left sidebar menu.
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 with the pages they contain are then taken up in different places on your site according to the chosen theme, among others.

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

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

Manage the menu

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

1. Click the Settings button in the left sidebar menu.
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 not display any menu 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 subpage and your site menu can display the created hierarchy.

Non-clickable menu title

Choose, if necessary, to make the very first element of such a menu non-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 hierarchy:
   
3. Choose a page name and Show more options.
4. Choose the URL redirection to specify the destination when clicked:
   

Add a new menu

For this:

1. Click the Settings button in the left sidebar menu.
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. Activate the Header menu bar:
   
   • Once activated, 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 placement 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 content of the page. The menu disappears if you scroll down the page:

You can define a menu that should always be fixed at the top (with different 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 box Menu Type.
5. The toggle switch Fixed at the top appears below and you can activate it.
6. Click on Save:
   

Some menu templates (like #3 and #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 module displays all menus and all your pages in a single block.

Define the page URL

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

If you later change the page name to Contact us then the URL will be www.domain.xyz/contact-us.

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

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

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 recorded during site creation while a menu already contains a link to the page in question, it will be dynamically adapted.