This tutorial presents the creation of navigation menus for your site built with Site Creator Infomaniak, as well as their composition, styles, and parameters.

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 Edit my site button to launch 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.
2. By default, the list of your pages appears, classified into 2 main sections: MAIN MENU and LEGAL:
   

But you can add several more.

These menus with the pages they contain are then reused in different places on your site, depending on 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 menus

Add a new menu

To do this:

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

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

1. Click the Settings button in the left sidebar.
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 not display any menu at all.

Create a sub-element in a menu

To do this:

1. Click on the Settings button in the left sidebar.
   • The list of your pages appears.
2. With the mouse, move a page slightly to the right under another page:
   
   • It will become a sub-page and your site menu can display the created tree:
     
   • Also refer to the tip below...

Non-clickable menu title

If necessary, choose not to make the very first element of a menu with sub-menu elements clickable (as configured above):

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

Menu element containing a link to another website

To do this:

1. Click on the Settings button in the left sidebar.
   • The list of your pages appears.
2. Click on the Add a 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 upon clicking:
   

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:
   
4. 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:
   
3. Then on Configuration:
   
4. You can decide on the location of your menus (on the left of the page or placed at the top, fixed or mobile, type "menu hamburger ☰" to 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 the Design button in the left sidebar.
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 thanks to the themes at the very top of the submenu:

• 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 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 configuration.
4. Choose In the header in the box Menu type.
5. The toggle switch Pinned to the top appears lower and you can activate 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 body of the page

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

• Add the element from the Apps:
  

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

Define the page URL

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

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

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

1. Click the Settings button in the left sidebar.
2. Click on SEO & Metadata (under Settings of 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 recorded during site creation while a menu already contains a link to the page in question, it will be dynamically adapted.