OpenCart Top Menu Disappearing? How to Display Custom Links Without Categories

OpenCart top menu displaying custom links without categories
OpenCart top menu displaying custom links without categories

Understanding the OpenCart Top Menu Behavior

A common challenge OpenCart store owners face, particularly those not relying on product categories for navigation, is the disappearance of the top menu bar when no categories are enabled. This behavior, while logical for category-centric stores, can be frustrating for users who wish to utilize the top menu for custom links, promotional banners, or static pages.

The core issue, as highlighted in a recent OpenCart community forum discussion, stems from a conditional statement within OpenCart's template files. By default, the menu is only rendered if the system detects the presence of categories.

The user orejuelajorge, using OpenCart 3.0.3.9 with the original theme, encountered this exact problem while trying to display custom links via the "Custom OpenCart header menu free" module. This insight article will provide a comprehensive solution, addressing both default OpenCart installations and those using third-party menu extensions.

The Core Solution: Modifying the Template File

The fundamental fix involves removing the conditional check that hides the menu when no categories are present. This is achieved by editing the relevant Twig template file.

Step-by-Step Instructions for Default OpenCart Menu

If you are using the default OpenCart theme and menu structure, follow these steps:

  1. Locate the File: Navigate to your OpenCart installation directory and find the file menu.twig. The typical path is:
    catalog/view/theme/YOUR_THEME_NAME/template/common/menu.twig

    Replace YOUR_THEME_NAME with the name of your active theme (e.g., default).

  2. Edit the File: Open menu.twig using a code editor.
  3. Remove Conditional Code: Look for the following lines of code and remove them:
    {% if categories %}
    ... (menu content here) ...
    {% endif %}

    The code {% if categories %} will typically be at the very top of the file, and {% endif %} at the very bottom, wrapping the entire menu structure.

  4. Save Changes: Save the modified menu.twig file.

Addressing Menu Extensions: The "Extension Factor"

As highlighted by orejuelajorge and confirmed by botva, many OpenCart users leverage extensions like "tmd headermenu module" (or similar custom header modules) to manage their top menu links. In such cases, the core menu.twig file might not be the one controlling your active header menu.

Step-by-Step Instructions for Menu Extensions

If you are using an extension for your header menu, the solution principle remains the same, but the target file changes:

  1. Identify the Extension's Template: Determine which Twig file your specific header menu extension uses. For the "tmd headermenu module," as discussed in the forum, this file is typically tmdheader.twig.
  2. Locate the File: The path for extension templates often follows a pattern like:
    catalog/view/theme/YOUR_THEME_NAME/template/extension/MODULE_NAME/tmdheader.twig

    Or, in some cases, it might be directly under an extension folder within your theme, for example:

    catalog/view/theme/default/template/extension/tmdheader.twig

  3. Edit the File: Open the identified extension template file (e.g., tmdheader.twig).
  4. Remove Conditional Code: Similar to the core solution, locate and remove the {% if categories %} and {% endif %} tags that wrap the menu output within that specific extension's template.
  5. Save Changes: Save the modified file.

Crucial Post-Modification Steps: Clearing Cache

After making any template modifications in OpenCart, it is absolutely essential to clear the system's cache to ensure your changes are reflected on the storefront. Failing to do so is a common reason why changes might not appear immediately, as experienced by orejuelajorge initially.

Perform the following cache clearing steps:

  • Clear OpenCart Modification Cache: In your OpenCart admin panel, go to Extensions > Modifications. Click the 'Refresh' button (blue circular arrow icon) at the top right.
  • Clear Theme Cache: Go to Dashboard > Developer Settings. Under the 'Theme' section, click the 'Refresh' button.
  • Clear Browser Cache: Clear your web browser's cache and cookies, or perform a hard refresh (Ctrl+F5 or Cmd+Shift+R).

Conclusion

Preventing the OpenCart top menu from being hidden when no categories are present is a straightforward process once you identify the correct template file to modify. Whether you're using OpenCart's default menu or a custom solution provided by an extension, the key lies in removing the {% if categories %} conditional logic. Always remember to clear all relevant caches after making any code changes to ensure your updates are visible.

Start with the tools

Explore migration tools

See options, compare methods, and pick the path that fits your store.

Explore migration tools