Customization Tips (How to ...) | Helix Ultimate - Documentation | JoomShaper

Helix Ultimate

Updated Last: 13 May 2024

Customization Tips (How to ...)

How to use the new "X" Twitter icon

The social media network formerly known as Twitter will be rebranded simply to X (since July 2023), a change that has already been reflected, where the spot once reserved for the blue and white bird logo has been replaced with a gray-scale letter X. Because this is new, it wasn't included in FontAwesome 5.x that you may have inside Helix Ultimate and Helix3 based templates. It was added only inside the new Helix Ultimate update (Nov 2023) and FontAwesome 6.4.2+. But there is a smart way to use that "X" icon in all Helix based templates:

  1. Start by visiting:
  2. Choose the primary color (by default is dark navy). You can choose any color you need from a color palette, for example, light color - then click OK.
  3. Click the "Download SVG file" button, and save the file (x-twitter.svg) on your local drive.
  4. If you want to have a different color - open icon file with HTML editor, add fill attribute with the HEX color you need, and save the changes. It's needed to check at least, because in some cases FA generator may not add that color value.
  5. Using the FTP tool, File Manager (cPanel), or any other working method to upload it on your server to /images folder.
  6. Inside Template Options > Custom Code > Custom CSS  paste the below CSS code:
.fa-twitter::before { content: url("/images/x-twitter.svg"); width: 14px;
  display: inline-block; height: 14px; vertical-align: -0.125em;}

It will replace all Twitter icons with a new design (X). If you want to use it inside the custom.css file - it's better to add an absolute URL path to the .svg file. Remember to use matching color for all previously used icons, try to use the most universal one.

new twitter icon

Extra tip! In Joomla 4+ by default, you cannot upload .svg files, it requests changing settings in Joomla Media > Options. But you can also install & use the Phoca Commander component, to upload a zipped (.svg) file and then unzip using the toolbar.

If you want to have a different color for the hover effect remember that .svg is not a font, and color cannot be changed using color style. You can get it only by using a second image with a different color code inside (x-twitter.svg) file. It means that you have to edit the file, then add/change fill the attribute with the HEX color that you need - then save a file with a different name, and use the extra CSS line. Here is an example CSS code:

.fa-twitter:hover::before { content: url("/images/x-twitter-hover.svg"); width: 14px;
  display: inline-block; height: 14px; vertical-align: -0.125em;}

In the Helix Ultimate 2.1 update we added a "Featured" badge that is displayed in a list of articles and a single article view if the article was marked as featured. Until we don't add the option On/Off, you have to use Custom CSS to hide it - if you don't want to display that red badge.

To hide from the list of articles (blog view), use the Custom CSS:

.article-list .article .featured-article-badge { display: none; visibility: hidden;}

To hide it from a single article view, use the Custom CSS:

.article-details .featured-article-badge { display: none; visibility: hidden;}

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 the below custom CSS code instead of the 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 the 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, the value is set to 0.

How to reduce space between Header and Component area

If you want to reduce top space (padding) between the header and the main body please use the following Custom CSS:

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

Notice! The default value from template styles was set at 100px. You can use any value you want, but it will be used for all components (articles, sp page builder, sp simple portfolio etc.) and everywhere on all subpages.

How to show Offcanvas Menu sooner

You can hide MegaMenu and display Offcanvas Menu also of chosen by you resolution, but it request using extra Custom CSS. Here is example for 1024px, you can change to 1280px as well. First line force to show [=] icon, and second to hide mega menu.

@media screen and (max-width: 1024px) {
#sp-header #offcanvas-toggler.offcanvas, #sp-header #offcanvas-toggler.mega
{display: block !important;}
 { display: none !important; }


@media screen and (max-width: 1280px) {
    .sp-megamenu-parent {display: none !important;}
    #offcanvas-toggler {display: flex !important;}

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

It's very easy, since Helix Ultimate 2.0.12 update you can change colors using Template Options > Presets > Edit > Off-canvas Menu settings

mobile colors change

Notice! Remember to disable SCSS > CSS in the Advanced tab first, also during that change, also CSS Compression must be Off. Later after changes, you can turn it On and then save the changes.

For templates that do not have that feature yet, you can also do that using a custom CSS method:

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

You can use any color you need (red, blue, yellow, green), 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 disable CSS compression, and 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 should be similar to that:

menu mobile =

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

Offcanvas Menu: How to change the color of closing (x)

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 (expand all)

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.

Offcanvas Menu: How to change ">" open icon and submenu item's color

In the off-canvas menu, submenu items can be opened using a ">" icon, by default it has a black color. To change its color it requests using custom CSS code. Below is an example using a WhiteSmoke color (you can use classic white, green, or yellow instead, as you wish):

.offcanvas-menu .offcanvas-inner > > a > .menu-toggler,  
.offcanvas-menu .offcanvas-inner > > .menu-separator > .menu-toggler {
  color: whitesmoke;

To change submenu items the in off-canvas (mobile) menu you have to use custom CSS as well. Here is an example with yellow color, but you can use white or another color.

.offcanvas-menu .offcanvas-inner > li li a {
  color: yellow;
new colors in mobile menu

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

How to Customize Offcanvas Menu

As the first step check the settings in Presets, where in the "Custom Style" tab you should be able to find the Offcanvas Menu section. From it, you can change basic colors.

About Font-Family and Font-Size go to Template Options > Typography > Custom > Custom Selectors  - paste:

.offcanvas-menu .offcanvas-inner > li a, 
.offcanvas-menu .offcanvas-inner > li span

Then set font settings > Save settings.

Anytime you can use Custom CSS to change the design of displayed menu items in the Mobile Menu, here are the class names used there:

.offcanvas-menu .offcanvas-inner > li a  { ... }

.offcanvas-menu .offcanvas-inner a  { ... } 

.offcanvas-menu .offcanvas-inner > li a:hover  { ... }

.offcanvas-menu .offcanvas-inner > li li a { ... }

Basic knowledge of CSS is required.

How to make the bottom menu vertical instead of horizontal

If we talk about the Menu module, you have to use use Bootstrap 5 class in that module in the Advanced (tab) > Menu Class (field): navbar

Module - Menu Class

If that module was published in the bottom module position please add also that in the Custom CSS area to make all positions equal:

#sp-bottom .sp-module ul > li:last-child {margin-bottom: 15px;}

It's pretty easy, but request using custom CSS code. Below is an example using a 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 add custom menu inside Profile menu

To get extra menu items inside Profile menu visible after user login - You have to publish a menu module in module position "logged-in-usermenu". This is a new module position added in Helix Ultimate 2.0.15 template update.

How to rename Meta generator with Helix Ultimate name

Since Helix Ultimate 2.0.9 update in Joomla! administrator, you can override the below generator phrase using: Languages: Overrides.

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

 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 for all installed languages (ES, DE, FR, etc.).


If you have an older Helix-based template version (2.0.6 and older), you can still hide it by using small code customization - edit that file: plugins\system\helixultimate\src\Core\HelixUltimate.php - 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 or FTP tool.

How to reduce space between menu items

If you have several menu items and they do not all fit in one row - you have a few solutions on how to improve that. Start by reducing the default space between menu items. See the example below:

.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {padding: 0 10px;}

By default, there is 15px of left and right padding between menu items. The value of 10px seems to be reasonable. Use that CSS code inside Helix Ultimate > Template Options > Custom Code > Custom CSS section or the custom.css file. Of course, you can reduce this value only for smaller selected screen sizes (laptops, tablets) using the @media query. Perhaps the most common media queries in the world are those that target particular viewport ranges. Example CSS syntax:

 @media screen and (max-width: 1199px)  { .sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {padding: 0 10px;}

There are lots of other things we can target besides viewport width. That might be screen resolution or device orientation, such as tall (portrait) or wide (landscape) based on how the device is rotated.

In some cases, to fit all the menu items, you should not only reduce the space between the MegaMenu items, but also reduce the font size a bit. Even 2 pixels less can make a big difference. For example, for smaller screens, you can reduce the font-size value from 17px to 15px to keep (fit) all menu items in one row on iPad Landscape view.

Here is an example of Custom CSS (using two methods):

@media screen and (max-width: 1190px)  { 
.sp-megamenu-parent > li > a {padding: 0 10px; font-size: 13px;}

If you used Menu items written in BIG LETTERS remember that they take up more space than Small Letters, so you may need this style as well (after "font-size: 13px;"):

text-transform: none;

How to change the color of submenu items?

You should be able to do that from Template Options > Preset > Customization. But if somehow it doesn't work in MegaMenu please use below Custom CSS:

.sp-megamenu-parent .sp-mega-group > li > a {color: black; }
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover, 
.sp-megamenu-parent .sp-mega-group > li > a:hover {color: red;}

How to change the position of the menu?

By default, in most cases, the menu is aligned 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 the menu, you have to use custom CSS with a new justify-content property value (center, flex-end or flex-start):

#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: flex-end !important;}
menu - right side

To move the menu to the left side use flex-start value in a similar way (Custom CSS) as it was presented above, then Menu Items will positioned at the beginning of the container:

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

How to hide the 3rd level of a menu in MegaMenu

From Navigation and MegaMenu settings it's not possible, but by using custom CSS you can hide from viewers' 3rd submenu. It's mostly for Desktop and Laptop users:

@media (min-width: 840px) {
.sp-megamenu-parent .sp-dropdown.sp-dropdown-sub .sp-dropdown-inner,
body.ltr .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child > a::after 
{display: none; visibility: hidden;}

How to remove background for active lang flag

By default under the active language flag, there is a grey background, you can remove it by using Custom CSS:

div.mod-languages ul li.lang-active {
  background-color: transparent;}

How to change background of body area in Boxed-Layout

By default is has solid white background color (#fff)  but by using Custom CSS you can:

  • add color transparency,
  • set different background color or even gradients,
  • or remove current color completely.

For that task you have to use Custom CSS to modify background color. Here is example CSS code that will add 50% of transparency for white color:

.layout-boxed .body-innerwrapper {
  background: rgba(255,255,255,0.5);

RGBA - contain color value (Red,Green,Blue) and transparency (alpha) value. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

To set the 100% transparent background color, you can also use:

.layout-boxed .body-innerwrapper {
background: transparent; }

It can be used for whole site, like in above example, for for selected subpages, but then it request extra class name.

How to change the order of elements in the 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 a ready plugin.

First, you have to know that since Helix Ultimate 2.0.12 update in the raw template you can put your custom URL for the logo link, it can be with a domain or just a subpage alias as well as just #. But if somehow you don't link at all, you have to use a custom CSS method:

#sp-header .logo a, .logo a, #sp-header .logo a {
cursor: default !important;
pointer-events: none; text-decoration: none; color: currentColor; 
user-select: none; -webkit-touch-callout: none;}

The above disabling a link CSS method should work for all Helix-based templates, based on Helix Ultimate and Helix3 even with a custom header name.

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

How to use a custom font(s)

In this guide, you will learn the basics of how to use self-hosted fonts in the Helix Ultimate template. Useful for custom fonts (that are not part of the Google font family) for text elements.

According to browsers support stats, the WOFF (.woff) is supported in 98% and the WOFF 2.0 format in 96% (info from Sep 2022). Only IE8 and older Android mobile browsers don’t support it. FontSquirrel still create SVG, however, browsers do not need that anymore. Every browser (including IE!) can use woff, ttf and otf fonts (there is one catch for IE, though: It needs an ‘installable’ flag). In most cases, all you need is using max two font formats per font.

In the following example, I used the font AMATIC , designed by: Vernon Adams. To generate web font formats and CSS code - I used the online WebFonts Generator from Alternative max lite solution:  Or you can download Web Fonts from
Follow the steps:

  1. Disable selected fonts in the Typography section (Template Options) 
  2. Copy all fonts files here: templates\shaper_helixultimate\fonts
  3. Create a new file custom.css where you should put the generated CSS code.
  4. Then change paths for font files adding "../fonts/" at the beginning.
  5. Also in the custom.css file for example define for what HTML tags (H1...h6, p, li) or classes your custom font should be used.

VIDEO guide:

How to add Adobe fonts to your website

You can integrate them only by using custom HTML and custom CSS. It means that you won't see them in Helix Template Options.

  1. Read the official Adobe guide:
  2. After choosing and generating the Adobe Font code, the first HTML part <link rel="stylesheet"....  paste in Helix Template Options > Custom Code > Before < / Head >
  3. And then by using Custom CSS you have to define for what HTML tags (for example h1, h2 or whole body) Adobe fonts should be used. For example:
h1, h2, h3 {font-family:"FONT_NAME"; font-weight:700; font-style:normal;}

p {font-family:"FONT_NAME"; font-weight:300;} 

If Adobe Font would be your main font(s) you can disable other fonts in Template Options > Typography and from all addons that you used so far.