How to Fix a Broken Layout After a Helix Ultimate Update

A Helix Ultimate update broke your site's layout? It is almost always fixable in minutes. Columns out of line, unstyled headers, mega-menu dropdowns opening in the wrong place or custom styling gone: the cause is nearly always one of a few things. Stale compiled or compressed CSS, a template that does not match the new framework version, outdated template overrides, or a stylesheet clash with another extension. Work through the steps below in order. Each one rules out a common cause, and the first two fix most cases.

• Before you start: back up and note your versions
• 1. Clear every cache and rebuild the CSS
• 2. Turn off CSS and JavaScript compression
• 3. Make sure the SCSS can compile
• 4. Check your template overrides
• 5. Look for Bootstrap and stylesheet conflicts
• 6. Check your custom CSS and Layout Builder
• 7. Still broken? Roll back and report it
• Quick checklist
• FAQ

Before you start: back up and note your versions

Take a full backup of files and database before changing anything, so you can roll back if needed. Then note two version numbers under System > Manage > Extensions: the Helix Ultimate system plugin (the framework) and your template. A template built for an older Helix Ultimate release can break when only the framework is updated, so check your template's changelog for the Helix Ultimate version it needs. If the template vendor released a matching update, install it first.

1. Clear every cache and rebuild the CSS

The most common cause of a broken layout after an update is old CSS. Helix Ultimate compiles its SCSS into CSS files and caches them, and when the framework's HTML changes, those old files no longer match it.

• Clear Joomla's cache. Go to System > Maintenance > Clear Cache, select all groups (including helixultimate and com_templates when listed), and delete them.
• Purge Helix's CSS. Open System > Site Template Styles, edit your Helix Ultimate style, go to the Advanced tab and use Purge CSS. It removes the cached CSS and SCSS output so it is built again.
• Save the style. Click Save in the template style so Helix writes fresh stylesheets.
• Bypass your browser cache. Open the site in a private window or do a hard refresh (Ctrl + F5 on Windows, Cmd + Shift + R on macOS). Also purge any CDN or server cache (Cloudflare, LiteSpeed Cache and similar).

[SCREENSHOT: Helix Ultimate template style, Advanced tab with Purge CSS]

2. Turn off CSS and JavaScript compression

On the Advanced tab, Helix Ultimate can combine and compress files with Compress CSS Files and Compress Javascript Files. Helix itself advises switching these off when problems appear: after an update, a combined file built from the old version can keep loading. Switch both off, save, and reload the site. If the layout is fixed, clear the cache once more before you switch compression back on, and add any file that still causes trouble to the exclude list.

3. Make sure the SCSS can compile

If the site looks completely unstyled, the CSS may never have been written.

• Compile once. On the Advanced tab, switch on Compile SCSS to CSS, save, and load the front end once so the stylesheets are generated. Helix recommends turning this off again on a live site, since it checks the SCSS files on every page load.
• Folder permissions. Helix writes compiled CSS into your template's own folder, /templates/YOUR_TEMPLATE/css/ (including the presets subfolder). Folders are usually 755 and files 644. If PHP cannot write there, template.css is never updated.
• PHP memory. Compiling a large template needs memory. If your server's memory_limit is low, raise it to 256M and try again.

4. Check your template overrides

If modules or article layouts move or lose their styling, an override is the usual suspect. Helix Ultimate ships its own updated layouts with the framework, but copies kept in your template's /html/ folder take priority and are never updated for you. They can still contain old markup and class names.

1. In Joomla, open System > Site Templates. Joomla flags overrides whose original file has changed; review those first.
2. To test, connect by FTP or your host's file manager and open /templates/YOUR_TEMPLATE/html/.
3. Rename one suspicious folder at a time (for example com_content to com_content_bak) and reload the page.
4. If the layout recovers, compare that override with the current version and update it, or delete it if you no longer need the change. Rename the other folders back.

5. Look for Bootstrap and stylesheet conflicts

Helix Ultimate 2.x is built on Bootstrap 5. An extension that loads its own older Bootstrap (3 or 4) brings conflicting grid and utility classes, which breaks columns and menus.

• Right-click the broken element in your browser and choose Inspect.
• In the Styles panel, see which stylesheet sets properties such as display, flex or width.
• If it comes from an extension, look in that extension's settings for an option to stop loading its own Bootstrap, or ask its developer.

[SCREENSHOT: browser DevTools Styles panel showing a conflicting stylesheet]

6. Check your custom CSS and Layout Builder

Your own styling usually lives in one of two places:

• The Custom Code tab (Custom CSS field) of the template style. It is stored in the database and is not touched by a framework update, so if it seems lost, check whether you are editing the right template style.
• A custom.css file. The default Helix Ultimate template loads /templates/YOUR_TEMPLATE/css/custom.css (and compiles scss/custom.scss) after its main stylesheet. Many Helix-based templates do the same, but not all; check your template's documentation or its index.php. A custom file you created yourself is not part of the update package, so it survives updates.

Then open the Layout tab and confirm that rows, container types (full width or boxed) and column widths still match what you had before.

7. Still broken? Roll back and report it

If none of the steps help, restore your backup to get the site working again, and send the template vendor the Helix Ultimate version, the template version, your Joomla and PHP versions, and a screenshot of the browser console. A mismatch between the template and the framework is something only the vendor can fix.

Quick checklist

1. Back up, and confirm your template supports the installed Helix Ultimate version.
2. Clear Joomla's cache, use Purge CSS, save the template style, and hard-refresh.
3. Switch off CSS and JavaScript compression while you test.
4. Compile the SCSS once and check that /templates/YOUR_TEMPLATE/css/ is writable.
5. Rename /html/ override folders one at a time to find an outdated one.
6. Use your browser's Inspect tool to find old Bootstrap or other conflicting stylesheets.
7. Keep custom styling in the Custom CSS field or a custom.css file your template loads.

Frequently asked questions