Skip to content

Introduction

The main navigation is the header menu with three buttons: Shop, Services and Connect. Each button opens a mega-menu on desktop and a tab in the mobile menu.

None of these menus is built in a menu editor. Each one is generated from your categories or content pages, and the theme decides which pages appear, in what order and how many levels deep. To change a menu, you change the categories or content pages behind it.

For the step-by-step process of adding, removing or reordering a menu item, see Edit the menus. This section explains how each menu is put together.

The three menus at a glance

MenuBuilt fromLevels on desktopLevels on mobileRight-hand panel on desktop
ShopProduct categories1, 2 and 31, 2 and 3Content panel
ServicesContent type services1 and 21, 2 and 3Content panel
ConnectContent type learn1 only1, 2 and 3Up to 11 brand tiles and Explore More

Level 4 and deeper are never shown.

In all three menus, items are ordered by Sort Order, highest first. Items with the same Sort Order are listed by name, A to Z.

The theme does not enforce a set number of items at each level. Too many items will still show, but the layout may not look as designed. The Product Categories page gives guidance on sensible numbers, and Services gives today’s counts.

Shop

The Shop menu is built from the product category hierarchy, using up to 3 levels:

  1. Level 1: top-level categories, listed down the left of the mega-menu.
  2. Level 2: subcategories of a level 1 category.
  3. Level 3: subcategories of a level 2 category.

A level 1 category with subcategories opens a tab rather than linking straight to its page. A level 1 category with no subcategories is a plain link.

Learn more in Product Categories.

Services

The Services menu is built from content pages of the services content type, and works much like Shop:

  1. Level 1: main service pages, listed down the left of the mega-menu.
  2. Level 2: child service pages, each shown with its own Alt image 1.
  3. Level 3: shown on mobile only.

Unlike Shop, Services shows its pages whether or not they have anything under them.

Learn more in Services.

Connect

The Connect button was previously labelled “Learn”. The label has changed, but the content type behind it is still learn, so Connect pages are still created and edited as learn content pages in the cPanel.

Connect on desktop

  • Left column: level 1 learn pages only, each as a plain link. Their child pages are never shown on desktop.
  • Right side: always the brand tiles, under the heading “Explore our Brands”. These are up to 11 pages of the brand content type, ordered by Sort Order (highest first), followed by an Explore More tile that links to the Brands page (/brands/).

Connect has no content panel on desktop, and there is no fallback content zone for it. To change which brands appear, see Change the brand tiles in Connect.

Connect on mobile

  • Shows learn pages at levels 1, 2 and 3. A parent item opens its list, and the first entry is See All [name].
  • A level 1 page with child pages can also show a content panel from its own related content, if it has any.
  • The list always ends with an Our Brands link to the Brands page (content ID 153, currently /brands/). Brand tiles are not shown on mobile.

Content panel

On desktop, each level 1 tab in Shop and Services has a panel on the right showing one linked image and title, taken from that item’s related content. If there is none, it falls back to a page set in a content zone. Connect does not use this panel on desktop.

Learn more in Content Panel.

Other site menus

The footer link columns and the home page category grid are not part of the main navigation. They come from Menu Manager menus (web_footer and category_grid). See Edit the menus for how to change them.

For developers

Theme files this page is based on

From Altapac-ReDev, branch development:

  • src/templates/headers/template.html: header buttons Shop, Services and Connect (#connect-button, line 97) and mobile tab Connect (#connect-mobile-tab, line 200). empty-main-content.template.html still labels the mobile tab “Learn”; no content page in Altapac-Content uses that header.
  • src/templates/headers/includes/components/desk-Menu.template.html: desktop mega-menu inside [%cache type:'cmenu' id:'web_deskmenu-v2' ttl:'86400' %]. Shop content_menu content_type:'category' sortby:'sortorder,name' show_empty:'0' (levels 1-3); Services content_type:'services' ... show_empty:'1' (no *level_3, and *level_2 does not print [@next_level@]); Connect content_type:'learn' ... show_empty:'1', where *level_1 never prints [@next_level@]. [@level2learnlist@] is never set, so the brand list content_type:'brand' sortby:'sortorder' show_empty:'0' limit:'11' always renders, with a hard-coded /brands/ Explore More tile.
  • src/templates/headers/includes/components/mobile-Menu.template.html: mobile menu inside [%cache type:'cmenu' id:'web_burgermenu-v2' ttl:'86400' %]. All three content_menu calls render levels 1-3. Connect level 1 builds a related-content panel (list type:'content' filter:'related_content=[@content_id@]' limit:'1'). “Our Brands” is [%url type:'page' id:'153' /%].

There is no learn_menu_content zone in the theme.