Customization Tips | Helix Ultimate 2.0 - Documentation | JoomShaper

Helix Ultimate 2.0

Updated Last: 26 April 2022

Customization Tips

How to hide Icon from Breadcrumbs

If you're using Helix Ultimate 2.0.x you may notice that in the first position of breadcrumb there is an icon (map marker). Yes, it can be hidden by using custom CSS:

.breadcrumb .divider.fas.fa-map-marker-alt {display: none;}

How to reduce space between Header and Article(s) area

If the space (padding) between the header and article and blog view is too big for you (by default is 100px), you can reduce it.

100px top padding

It's pretty easy, but request using custom CSS code:

.com-content #sp-main-body { padding: 10px 0; }

Of course, you can use a different value, a custom one for the top and bottom padding. It depends on your design goals.

If you want to reduce only for the top padding and keep the default bottom padding (100px) use below custom CSS code instead of code mentioned above:

.com-content #sp-main-body {padding-top: 0px; }

If you want to reduce to 0px paddings only in a single (detailed) article view - please use below line:

.view-article #sp-main-body {padding: 0px; }

Notice! By default in SP Page Builder view from Page, the top and bottom padding doesn't exist at all, value is set to 0.

How to change the color of Offcanvas (=) Menu icon

It's quite easy, please use custom CSS:

.burger-icon > span {background-color: white !important;}

You can use any color you need (red, blue, yellow), in the above example I used white (#fff) color. It's useful when your header has a dark background color.

mobile menu - lines colors - burger

To see changes remember to clear the Joomla cache, especially if you use JCH Optimize or a similar CSS compressor tool after using the above code. You may need to refresh/clear the browser cache as well.

How to increase the size of Offcanvas (=) Menu

It's also easy, please use below custom CSS:

.burger-icon { width: 35px; } 

 .burger-icon > span { height: 4px; }

The final effect after using the above CSS code.

menu mobile =

Notice! Default value for [=] width is 25px, and height is 2px.

How to change color of closing (x) icon in Offcanvas Menu

It's also easy, to change the color of (x) icon from black to red please use below custom CSS:

.offcanvas-active .burger-icon > span, .burger-icon > span 
{ background-color: red;}

Before and after the change. In the below example we used red color for "X" icon, but you can change different colors (yellow, green, pink, blue).

x close icon color

Offcanvas Menu: How to display all submenu items

If you want to display all submenu items from the mobile menu that users don't have to click (+) to see them all. It's possible, but requests using custom CSS code:

.menu-parent .menu-child{
    display: block !important;
.menu-parent .menu-toggler{
    display: none !important;

In some cases, to be able to scroll down thru the mobile menu you have to add/use also this CSS line:

.offcanvas-menu {overflow: scroll;}

The above code should be used inside Template Options -> Custom Code -> Custom CSS OR inside custom.css file.

It's pretty easy, but request using custom CSS code. Below is an example with white color:

a.sp-sign-in { color: white; }

To add hover color effect (yellow) add and use also this line:

a.sp-sign-in:hover, a.sp-sign-in:focus { color: yellow; }

It's a template language phrase. Please go to System -> Language Overrides, choose your language (Site), and create a new override for this language string:


It's a template language phrase. Please go to System -> Language Overrides, choose your language (Site), and create a new override for those language strings:


General tip: All phrases used by the Helix template (in front and admin area) are inside that file: languages/en-GB/en-GB.tpl_shaper_helixultimate.ini

How to disable/hide Meta generator with Helix Ultimate name

If you don't need default meta with Helix name inside:

<meta name="generator" content="Helix Ultimate - The Most Popular Joomla! ...."> 

you can hide it by using small code customization, you have to edit the helix file:


where you have to edit line 312:

$this->doc->setGenerator('Helix Ultimate - The Most Popular Joomla! Template Framework.');

Then replace the default text with a custom one, you can use any word, for example, "CMS" or your company business name. To edit php files you can use File Manager from cPanel or Phoca Commander component (J3) or FTP tool.

UPDATE!  Since Helix Ultimate 2.0.6 update you can override the above phrase using Languages: Overrides, like in the below example.

In the field: Language Constant  use: HELIX_ULTIMATE_GENERATOR_TEXT

In the text field: put your custom name, it can be "CMS" or your company name, as you wish. Remember to use this language override to all installed languages.


How to change the position of the menu?

By default, in most cases, the menu is algin to the left side, close to the logo picture. In the old Helix-based template, you could have a menu aligned to the right side or most to the center. To center menu you have to use custom CSS with new justify-content property value:

#sp-menu > .sp-column, 
 #sp-menu  .sp-megamenu-wrapper { justify-content: center !important;}
centered menu

To move the menu to the right side use below custom CSS code:

#sp-menu > .sp-column, 
 #sp-menu .sp-megamenu-wrapper { justify-content: end !important;}
menu - right side

How to change the order of elements in Article view

If your projects request changing the position (order) of Article Title and Image you have two options to do this.

  • By template article view customization: plugins\system\helixultimate\overrides\com_content\article\default.php
  • Or by custom CSS code
/* for single article */
.view-article .article-details {
    display: flex;
    flex-direction: column;
.view-article .article-header {
    order: -1;
    margin-bottom: 20px;

If you want to change it for the Article list in Blog view as well then use below Custom CSS:

/* for articles list */
.article-list .articleBody, .article-list .article-body {
    display: contents;
.article-list .article {
    display: flex;
    flex-direction: column;
.article-list .article-header {
    order: -1;
    margin-bottom: 20px;

How to add Smooth Scrolling

There are many ways to add this nice looking feature to Helix based template, you can:

  1. Install an extra Smooth Scrolling type plugin from JED.
  2. Download and use smooth-scrolling javascript code inside the custom.js file.

But by default, Helix Ultimate 2.0 template use Bootstrap 5.x where scroll-behavior: smooth property is already used. It specifies whether to smoothly animate the scroll position, instead of a straight jump for the whole page. The scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time.  Note: it is also possible to add it to a specific element/scroll container.
Browser support: Chrome, Edge (new), Firefox, Safari, Opera. For browsers that do not support the scroll-behavior property or you want a more advanced (configurable) solution, you should use JavaScript / jQuery or ready plugin.

How to add webp image type support

By default, Joomla 3.10 or Joomla 4 may not use this image extension format, so you have to add it manually. In Joomla Admin go to Media - click "Options" then please add mentioned phrases. Screenshot from Joomla 3.10 with correct settings. In Joomla 4 it's very similar.

Webp format