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.

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, value is set to 0.

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

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.

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.

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

Offcanvas Menu: How to change 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,
#modal-menu-toggler.active .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).

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.

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 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 ul.menu > li.menu-parent > a > .menu-toggler, .
offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler {
  color: whitesmoke;
}

To change submenu itemsthe  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 ul.menu > li li a {
  color: yellow;
}

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

How to change 'Sign In' Link Color

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; }

How to Translate the Sign-in link

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:

HELIX_ULTIMATE_SIGN_IN_MENU

How to Translate Profile and Logout links

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:

HELIX_ULTIMATE_USER_PROFILE
HELIX_ULTIMATE_USER_LOGOUT

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! ...."> 

In the older version of Helix Ultimate you can 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 (J3 / J4) or FTP tool. Remember to keep exactly this same filename "HelixUltimate.php"  (!)

UPDATE!  Since Helix Ultimate 2.0.6 update , it means in 2.0.9+ 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;}

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;}

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.