Use the Mega Menu in Classic CMS
Important
Classic CMS reached end-of-life in January 2025 and is no longer receiving feature updates or bug fixes. You should [migrate to Spire CMS](../../End user docs/spire-cms/get-started-with-spire-cms/migrate-from-classic-cms-to-spire-cms.mdx).
The Responsive Header Template, also known as the Mega Menu, is a menu template option that expands the website menu horizontally instead of vertically. This template allows content users to change the look of their site quickly without needing to build such a template from scratch.
Standard header template
Responsive / Standard Template example
The Responsive / Standard Template displays Sign In and Language/Currency selection options at the top of the screen. Users hover over Products to view a vertical, hierarchical list of site categories, and over My Account to access options available based on their user role and site settings.
Mega menu header template
Mega Menu example
The the Mega Menu lists the site's categories horizontally across the top of the screen. Users hover over a category to view subcategories and the rest of the hierarchical structure.
This template removes the currency and language options from the header. These two options are now available as separate widgets, and can be placed anywhere on the page. Optimizely recommends placing both widgets in the footer.
This template also moves My Account options under the user's name in the upper right corner. When the user hovers over their name, they can access the My Account options available based on their user role and site settings.
Note
To hide the My Account page from the horizontal navigation, change the page's settings to Exclude From Navigation.
Edit the header
Edit the header to change the header template, or add additional widgets.
- To edit the header, log in to the Admin Console and select View Websites in the upper right corner.
- Select the website you wish to edit.
- Hover over the blue triangle in the upper left corner, and select Show CMS.
- Select the content tree, then select Header.
- Click Edit.
- Add content and/or modify widgets as needed, or click Edit on the HeaderView widget to change the header template and related options.
- Choose from the Display Cart drop-down to show the cart Always, Based On Website Navigation Setting, or Never. The default selection is Always.
- To change the header template, select Unlock next to the Template drop-down, and select a template.
- Click Save.
- Click Publish in the upper right corner to publish changes.
Edit the Footer
If using the Mega Menu Template in the header, consider adding the Language Selector and Currency Selector widgets to the footer. These widgets allow the user to view the website in their chosen language/currency.
- To edit the footer, log in to the Admin Console and click View Websites in the upper right corner.
- Select the website you wish to edit.
- Hover over the blue triangle in the upper left corner, and select Show CMS.
- Select the content tree , then select Footer.
- Click Edit.
- Click Content+ to add a widget.
- Select the Language Selector or Currency Selector widget from the drop-down, and click Next.
- Add an optional CSS Class, then click Save.
- To change the position of widgets in the footer, select the crosshairs in the upper right corner, and rearrange widgets as needed.
- Click Publish in the upper right corner to publish changes.