Configure Header and Footer

Overview

Functional Header and Footer menus are essential for the visitors to quickly navigate your website and find relevant content. They also support better usability and improve search engine visibility.

Note

Feel free to use our Demo Page and get creative ideas for your own site: template.cms.picturemaxx.com

Before adding links to these menus, make sure you create your pages. See Basic page for instructions.

Configure display options

There are various options to customize the menu display to match your design and user experience needs.

  1. Navigate to Configuration > picturemaxx Configuration > Theme Settings > Colors, Logos & Styles.
  2. On the Color configuration page, scroll down to picturemaxx Theme settings and select Display options. The available settings are:
  • Type scale
    Select a scaling option to adjust size of each page element (fonts, logos, etc.) so that they are proportionally related to each other. The Default option is 16 px.
  • Header Style
    Try each style and decide which one suits you best.
  • Navigation Style (only for Header Style: Logo & Burger Menu)
    Select how the Burger Menu appears: slide-in or full-screen overlay.
  • Display Header as fixed
    Keep the entire Header (Logo + Menus) fixed and always visible when scrolling. For Logo & Burger Menu there is also the option to only fix the logo, regardless of the header.
  • Hide language switch
    Enable, if you only use one language for the site.
  • Main navigation → 1st-level text style
    Set text casing for Navigation Menu. Choose between all UPPERCASE, Capitalize Each Word, or No Transform to keep the original text casing.
  • Doormat Settings
    Choose the number of columns for the Doormat. You can also hide the Doormat here.
  • Logo Alignment
    Align left, center, or right.
  • Footer Alignment
    Align left, center, or right.
  • Consider page margins
    Apply margins to content with backgrounds (images, videos, slideshows or just a background graphic).
  • Use animations on scroll
    Apply fade effect animations for the page elements when scrolled into view.
  • Use back-to-top button
    Add the button for quick navigation to the top of the page.
  • Show similarity search
    Important: Requires Backstage API key. Contact us at support@picturemaxx.com for details and guidance.

Quick Demo: Configure header and footer display options.

Edit menus

Menus help guide visitors to the most important information on your website. You can configure various menu areas: Header menu, Main navigation, Doormat, and Footer menu.

To add links, go to Structure > Menus, and choose the menu you want to edit: Footer Menu, Header Menu or Main navigation.

Main navigation Website frontend showing the highlighted Main Navigation menu.
Header menu Website frontend showing the highlighted Header Menu.
Footer menu Website frontend showing the highlighted Doormat menu.

Configuration Example: Main navigation

Configured settings for the Main Navigation menu on the demo website.

The Header menu appears in the top-right corner of your website. This menu is preconfigured to support icons instead of text for each item.

Note

Only the Header menu supports icons.

  1. Navigate to Structure > Menus > Header Menu to set up your header menu.
    • Edit a menu item: Click Edit next to the item.
    • Create a menu item: Click + Add link.
  2. Configure the menu settings:
    • Menu link title
      Enter a name for the link. This text is shown if you don’t use an icon.
    • Link
      Choose what the item links to. You can select a page on your site or enter an external URL.
    • Enabled
      Hide or display the link in the menu.
    • Attributes > Display Options
      Choose where this link’s sub-items should appear. If you don’t select anything, the sub-items will show in both the header and doormat menus.
    • Attributes > Link Target
      Decide how the link opens: same window or new window.
    • Icon > Icon image
      Upload an icon (recommended size: 50 × 50 px).
    • Icon > Icon padding / width / height
      Adjust the icon's padding, weight, and width in pixels to match the size and style of your menu. Experiment with different values to find the optimal appearance.
    • Icon > Hide text
      For a cleaner design, we recommend enabling the Hide text option when using icons.
    • Language
      Set the language for the menu item.
    • Parent link
      Select a parent item to create a submenu.
    • Display Settings > Weight
      Control the order of items. Lower numbers appear higher in the list.
    • Display Settings > Show as expanded
      Enable this to always display sub-items (if the link has any). This setting can be overridden at the menu level.
    • Description
      Add short helper text that appears when users hover over the link.
    • Simple XML Sitemap
      You can ignore these settings. They apply to SEO for pages, not menu links. Just stick to the default settings.

Quick Demo: Add links to Header Menu.

Main navigation appears at the top center of your website. It also supports dropdown menus, so you can group related links under one parent item. See Arrange menu items in dropdowns below.

To edit Main navigation, go to Structure > Menus > Main navigation. Adding and managing menu items works the same way as for Header Menu.

Arrange menu items in dropdowns

You can organize your menus into dropdowns by arranging items into a hierarchy. To manage the menu structure, go to Structure > Menus and select a menu you want to edit.

After you create all menu items, you can rearrange the order in which they appear in the menu:

  • Drag and drop: Click and hold a menu item, then drag it up or down to change its position. Or
  • Reorder the menu items by weight:
    1. Click the Show row weights link to display the Weight column.
      • Each item has a number that controls its position. Lower numbers appear higher in the menu.
    2. Adjust the numbers to quickly reorder multiple items.

Configuration Example: Show row weights

Configuration page showing an example of row order visibility settings.Quick Demo: Arrange menu items in dropdowns

Footer menu appears at the bottom of your website. It is typically used for important but less prominent pages, such as Imprint, Privacy Policy, and Copyright.

To add links to this menu, go to Structure > Menus > Footer Menu.

In Display Options you can choose the menu alignment (left, middle, or right).

Adding and editing menu items works the same way as in the Header menu.

Display Doormat

The Doormat displays an overview of your website’s menu links at the bottom of each page, helping visitors quickly find key sections.

To configure doormat:

  1. Go to Configuration > picturemaxx Configuration > Theme Settings > Colors, Logos & Styles.
  2. Scroll down to picturemaxx Theme settings and select Display Options.
  3. In the Doormat settings dropdown
    • Specify how many columns the doormat should have.
    • If you decide against a Doormat, select Hide doormat

Configuration page showing the Doormat display options setup.