Portals - Menu, landing page, sticky header

Keeping the header visible

Do you want the navigation menu with the logo to always stay at the top of the screen (sticky header), even when users scroll? Here’s how to set it up:

1. Go to Portals and open the portal for which you want to make the header sticky. 

2. On the bottom left, open Templates and select the template where the header widget is located. This is often the Base template, but it may have a different name.

   

3. Click on the row number where the header widget is located (usually row 1). The row will darken when you click on it, and the settings menu will appear on the right.
4. Click on the box next to Always keep this row visible? (English: Is row sticky) so that it is filled.
5. Click Save.
6. Click Publish at the top right.

Note: If the header scrolls along (sticky header) and has no background colour, it often remains transparent. This can cause the logo and navigation options to be difficult to read, especially if users scroll over a light or busy background. By giving it a fixed background colour, the header will always remain clearly visible. Under Giving the header a background colour you can read how to set this up.

Giving the header a background colour

By default, the header has a transparent background. You can give it the same colour as the background of the screen so that the header subtly blends into the page. This creates a calm appearance. If you want the header to stand out as a fixed menu, choose a contrasting colour, such as white (#ffffff), for a neutral and clearly readable bar.

Step 1: Find the background colour of the screen

If you want a contrasting colour, you can skip this step.

1. Go to Theme editor and open the theme of your environment.
2. Click the paintbrush at the top right.
3. Click on Colours.
4. Look under Background for the current background colour of the screens.
5. Copy the colour code, for example #f2f2f4, so you can paste it later.

Step 2: Give the header a background colour

1. Go to Portals and open the portal where you want to edit the header. 

2. On the bottom left, open Templates and select the template where the header widget is located. This is often the Base template, but it may have a different name.

   

3. Click on the area where the header widget is located. The border of the area will darken and the settings menu will appear on the right.
   • Note: Do not click on the widget itself. Then the widget settings will appear instead of the area settings. If you see a dark frame around the widget, click twice in the area (once to deselect the widget and once to select the area).
4. Click the paintbrush.
5. Scroll down until you see the option Background.
6. Enter the colour code in Background, for example #ffffff for white. The circle behind the input field changes to the new colour.
7. Click Save.
8. Click Publish at the top right.

Step 3: Give the entire row a background colour

If you use the background colour of the screen, this step is not necessary. If you use a different colour, it is nice to give the entire top row, from left to right, a single contrasting colour. This creates a nicer result.

1. Click on the row number where the header widget is located (usually row 1). The row will darken when you click on it, and the settings menu will appear on the right.

   

2. Enter the colour code you chose for the area of the header widget in Background. The circle behind the input field changes to the new colour.
3. Click Save.
4. Click Publish at the top right.