Call anytime and leave your contact details and requirements.

Call anytime and leave your contact details and requirements.


Your go to place for news, tips and tricks!

Helix Ultimate Off-Canvas Menu edit with CSS

Customising Helix Ultimate's Off-Canvas Menu

The off-canvas menu in Helix Ultimate is a fantastic feature, but its default settings may not be to everyone's taste. This guide will arm you with the know-how to tweak this menu to your liking with CSS.

Understanding the Off-Canvas Menu

When you click the hamburger icon, a side panel glides into view. That's your off-canvas menu. It's a key player in how visitors interact with your site, but its default setup might not be doing you any favours.

Why Customise the Off-Canvas Menu?

  1. User Experience: A tailored menu can make your site more intuitive.
  2. Visual Appeal: A few tweaks can bring the menu in line with your site's aesthetic.
  3. Navigation: A streamlined menu can make it easier for users to find what they're looking for.

CSS for Reducing Gap Between Text and Arrow on the Right in the off-canvas menu

If you find the arrow with a large space from the text, you can bring them closer together.

Use this CSS snippet: 

body.ltr .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler { right: 0; padding-right: 10px; } 

Moving the Arrow to the Left of the Text

If you fancy the arrow on the left,

Use this CSS snippet:

body.ltr .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler { left: 0; padding-left: 10px; } 

Changing the Arrow Colour in the Off-Canvas Menu

To give the arrow a splash of blue (#5d83d2)

use this CSS snippet: 

body.ltr .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler { color: #5d83d2; } 

Make System Links Menu Headings and Arrow Clickable to expand the Off-Canvas Menu Java Script

If your top menu items are system links with a hash symbol, you can make both the text and the arrow clickable. 

Here's how to do it with JavaScript:

document.addEventListener("DOMContentLoaded", function() { const menuParents = document.querySelectorAll('.menu-parent'); menuParents.forEach(function(menuParent) { const anchor = menuParent.querySelector('a'); const toggler = menuParent.querySelector('.menu-toggler'); let isTogglerClicked = false; if (anchor && toggler) { anchor.addEventListener('click', function(event) { if (anchor.getAttribute('href') === '#') { event.preventDefault(); if (!isTogglerClicked) { toggler.click(); } isTogglerClicked = false; } }); toggler.addEventListener('click', function(event) { isTogglerClicked = true; }); } }); }); 


  • Where to Add the CSS or JS Code in Helix Ultimate Template?
  • Navigate to Joomla 4 Administrator Console > System > Site Template Styles > Select your Template > Template Options Button > Custom Code
Stay Informed

When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.

Navigating Google's October 2023 Core Update - A G...
Toshiba e-studio Scan to Email with Gmail - Workin...

Related Posts


For over two decades, we've been helping businesses and individuals with all their Technical Support and Website Service needs - at home and worldwide. And we don't just rest on our laurels - we're always pushing ourselves to stay ahead of the game regarding the latest tech trends. But most importantly, we're committed to providing great service to all our clients - no matter how big or small.

Useful Links


COR Solutions
Repair Center (by appointment only)
52 Walsworth Road