Call anytime and leave your contact details and requirements.
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?
- User Experience: A tailored menu can make your site more intuitive.
- Visual Appeal: A few tweaks can bring the menu in line with your site's aesthetic.
- Navigation: A streamlined menu can make it easier for users to find what they're looking for.
CSS Hero
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; }); } }); });
FAQS
-
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.
