Headers and footers

The website header is the top section of a web page and usually contains elements such as the logo, the menu, the search bar, the sign-in/customer account button, etc. The footer is displayed at the bottom of a web page and usually contains information such as contact details, links, legal notices, and other options.

Header design

To modify the header’s design, click on Edit, then click on the header. The following options are available in the Header section of the Customize tab in the website editor:

  • Choose a Template from the drop-down menu.

  • Select Background settings to change the color palette through different Theme styles, Custom color options, and Gradient ones.

  • When adding a Border to the header, its size, style, and color can be defined.

  • Adapt Round corners to fit the design.

  • Add a Shadow and define its Color, Offset, Blur, and Spread.

  • Add a Scroll Effect. Hover on an effect to preview it.

  • Choose the Header Position between Regular, Hidden, and Over The Content. When Over The Content is selected, you can customize the Background and Text Color.

  • Show or hide Elements such as text, the search bar, Sign in button, social media links, Contact us button, and logo.

To finalize changes, click on Save.

Tip

To hide the header, click on Edit, click on the header, and go to the Theme tab of the website editor. Scroll down to the Advanced section and toggle the Show Header switch to hide/show the header.

Header content

Menus organize the header’s content and help users navigate through web pages effectively. User-friendly and well-structured menus also play a crucial role in improving search engine rankings.

Add menu items

By default, pages are added to the menu as drop-down menu items when they are created. To add a new menu item, follow these steps:

  1. Go to Website ‣ Site ‣ Menu Editor.

  2. In the menu editor, click Add Menu Item.

  3. In the pop-up window, enter the Name to be displayed in the menu.

  4. Type / in the URL or Email field to search for a page on your website or # to search for an existing custom anchor.

  5. Click OK.

  6. Edit the menu structure if needed, then Save.

Mega menus

Mega menus are similar to drop-down menus, but instead of a simple list of sub-menus, they display a panel divided into groups of navigation options. This makes them suitable for websites with large amounts of content or e-commerce websites, as they can help include all of your web pages or e-commerce categories in the menu while still making all menu items visible at once.

screenshot: website-header-footer-mega-menu
menu
(website)
shows
The website navigation bar with a mega menu dropped down over the page, showing its columns of links and images.
highlight
The opened mega menu (red frame).
data
Mega menu 'Services' with three columns.
module
website
notes
English UI, light theme, 1440px width.

To create a mega menu, go to Website ‣ Site ‣ Menu Editor and click Add Mega Menu Item. Enter the Name of the mega menu in the pop-up, click OK, then Save.

To adapt the options and content of the mega menu, click on a mega menu item in the header, then click Edit. Mega menus are composed of building blocks, which means you can customize each component individually. For example:

  • Edit the text directly in the building block.

  • Edit a menu item’s URL by selecting the menu item and clicking the Edit link button in the small preview pop-up. Type / to search for a page on your website, or # to search for an existing custom anchor.

    screenshot: website-header-footer-mega-menu-option
    menu
    Website ‣ Edit ‣ (mega menu)
    shows
    The editor's right sidebar for a selected mega menu with the Template and Size options.
    highlight
    The Template option (red frame).
    data
    Demo website 'My Website'.
    module
    website
    notes
    English UI, light theme, 1440px width.

  • Move a menu item by dragging and dropping the related block to the desired position in the mega menu.

  • Delete a menu item by deleting the related block.

To adapt the general layout of the mega menu, go to the Customize tab of the website editor, then, in the Mega Menu section:

  • Choose a Template.

  • Pick the Size: either Full-Width or Narrow.

To finalize changes, click on Save.

Automatic category mega menus

Keeping a mega menu in sync with a large eCommerce category tree by hand is tedious. The Auto Category Mega Menu module (website_sale_megamenu_category) generates the content of a mega menu from the eCommerce categories.

On a mega menu item in the Menu Editor, enable Auto-generate mega menu and set:

  • Starting category: the category whose children are listed. Leave it empty to start from the top of the tree.

  • Depth: how many levels of sub-categories are included, two by default.

  • Mega-menu template: the layout used to render the generated menu.

The menu is regenerated when the category tree changes. Three buttons control it:

  • Regenerate: rebuilds the menu content from the categories;

  • Force regenerate (discard edits): rebuilds it even if the menu was edited by hand, discarding those edits;

  • Detach / make manual: stops the automatic generation and keeps the current content as an ordinary, hand-edited mega menu.

screenshot: website-header-footer-auto-mega-menu
menu
Website ‣ Site ‣ Menu Editor ‣ (mega menu item)
shows
A mega menu item with Auto-generate mega menu enabled, the Starting category, Depth and Mega-menu template fields, and the Regenerate / Force regenerate / Detach buttons.
highlight
The Auto-generate mega menu checkbox and the Starting category field (red frame).
data
Starting category "Shop", depth 2, template "Columns".
module
website_sale_megamenu_category
notes
English UI, light theme, 1440px width.

Which categories appear in the menu is controlled on the category itself. Each eCommerce category has a Show in mega menu state and an Auto-manage menu visibility option: while the latter is enabled, a scheduled job hides categories that currently have no available product and shows them again when they do, so that the menu never leads to an empty page. Turn the option off on a category to set its visibility by hand.

The layouts themselves are managed under Website ‣ Configuration ‣ Mega Menu Templates, where each template holds its own XML, CSS and JS, together with a revision History that can be compared and restored.

screenshot: website-header-footer-mega-menu-templates
menu
Website ‣ Configuration ‣ Mega Menu Templates ‣ (template)
shows
A mega menu template with its XML, CSS and JS tabs and the History section listing previous revisions with the Compare and Restore buttons.
highlight
The History section (red frame).
data
Template "Columns" with three revisions.
module
website_sale_megamenu_category
notes
English UI, light theme, 1440px width.

Note

The generated menus are listed under Website ‣ Configuration ‣ Auto Mega Menus, which gives an overview of every automatically managed mega menu and of the ones whose content no longer matches the category tree.

Hide a dynamic menu item for non-logged in users

To hide a dynamic menu item (i.e., a menu item generated automatically by Odoo, for example, when you install an app or module, such as Events, Courses, etc.) for non-logged in users, follow these steps:

  1. Enable developer mode.

  2. Go to Website ‣ Configuration ‣ Menus.

  3. Expand the list of menus for the relevant website if needed, then click the menu item you wish to hide.

  4. In the Visible Groups section, click Add a line under Group Name.

  5. Search for the group User types / Portal, select it, then click Select.

  6. Save.

Tip

To hide the Shop menu item, restrict ecommerce access to logged-in users.