Joomla Cassiopeia mobile menu: hamburger and submenus

On a phone, Cassiopeia folds the main menu behind a button with three lines. When that button does not appear, the menu stays a long row of links that wraps over two or three lines, or the submenus never open. Nearly always it comes down to two module settings. You can fix it by hand with the steps below, or let our own Offcanvas menu replace the dropdown with a menu that slides in from the side.

How Cassiopeia builds the mobile menu

Cassiopeia has no menu of its own. It shows whatever Menu module you publish in the menu position, and the module's layout decides what happens on a small screen. The template ships two layouts for mod_menu:

• Dropdown: a horizontal menu with dropdown submenus. It has no toggle button, so on a phone all items stay visible and wrap.
• Collapsible Dropdown: the same menu inside a Bootstrap navbar with a toggle button. Below 992 pixels wide the menu is hidden and the button shows; tapping it opens the menu under the header.

The 992 pixel breakpoint is fixed in the layout (navbar-expand-lg). There is no template setting to change it.

No hamburger button: check these settings

Open Content > Site Modules and edit the menu module that sits in the header.

1. Position: it must be menu. A menu in topbar, below-top or a sidebar gets no toggle button. If the module does not show at all, our article on module positions walks through the usual causes.
2. Advanced > Layout: pick Collapsible Dropdown under "From Cassiopeia Template". Default and Dropdown have no button.
3. Module > Sub-menu Items: set to Show if you want submenus at all. With Hide only the top level is shown, on desktop and on phones.
4. Menu Assignment: On all pages, otherwise the menu disappears on pages that have no menu item of their own.

Using a child template or a copy of Cassiopeia? The layouts live in templates/cassiopeia/html/mod_menu/. A child template inherits them; a full copy needs that folder too, or the Layout list will not offer them.

Submenus that do not open on a phone

Cassiopeia opens submenus with a small arrow button next to a parent item. How that works depends on the type of the parent menu item:

• A normal page link (for example a single article): the text opens the page, only the arrow next to it opens the submenu. Visitors who tap the text land on the parent page and think the submenu is broken.
• Menu Heading or Separator: the whole item is the toggle, because there is no page to open.

If a parent item only exists to hold its children, change its type to System Links > Menu Heading. On a phone the whole row then opens the submenu. A tap outside the menu closes an open submenu again.

Colours, size and the sticky header

The opened mobile menu sits on the header background, which is the primary colour of the template style, with white text. On a light primary colour the links become unreadable. Change them in media/templates/site/cassiopeia/css/user.css (see user.css and the Web Asset Manager), so an update does not undo it:

@media (max-width: 991.98px) {
  .container-header .navbar-collapse {
    background: #ffffff;
    padding: .5rem 1rem;
    border-radius: .25rem;
  }
  .container-header .mod-menu a,
  .container-header .mod-menu .mod-menu__sub a {
    color: #1d2b36;
  }
  .container-header .navbar-toggler {
    border-color: rgba(255, 255, 255, .6);
  }
}

Two other things catch people out:

• Sticky Header (Advanced tab of the template style) does nothing below 992 pixels. Cassiopeia forces the header to position: relative on small screens, so it scrolls away.
• The menu pushes the page down. The collapsible menu opens inside the header, not over the content. With twenty items and three levels the visitor scrolls through the menu before reaching the page. Keep the top level short and move deep levels to a sidebar menu with Start Level 2.

Want to change the rest of Cassiopeia without CSS as well, such as colours, fonts, a top bar and footer columns? That is what our own Kickstart Cassiopeia does, and the Offcanvas menu is made to work alongside it.

Checklist

• Menu module in position menu, assigned to all pages
• Layout Collapsible Dropdown, Sub-menu Items Show
• Parent items without their own page are Menu Headings
• Mobile colours set in user.css, tested below 992 pixels
• Top level short enough to fit a phone screen
• Need a slide-in menu, your own breakpoint or a separate mobile menu: our own Offcanvas menu