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

About COR Solutions Ltd

For over 25 years, COR Solutions has been at the forefront of providing Managed IT services, Web Development, content writing, AI Content Creation and SEO strategies, primarily catering to businesses in Hitchin, Letchworth, Baldock and London. Our commitment extends beyond keeping pace with technological advancements; we proactively adapt and integrate the latest tech trends to offer bespoke solutions. Whether it's robust IT support, dynamic web development, or strategic online marketing, our dedicated team is geared towards elevating your business. We take pride in our ability to offer exceptional service tailored to each business client's unique needs while accommodating individual technical support and website service needs.

Useful Links

Company Information

COR Solutions Ltd
by appointment only, 52 Walsworth Road

Company number 15027891