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 show Offcanvas Menu on smaller resolution

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

 .sp-megamenu-parent.d-none.d-lg-block 
 { display: none !important; }
}

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 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 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 reduce space between menu items

If you have several menu items and not all of them are in one row - all you have to do is reduce the space between menu items. Below is an example:

.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. Above custom code put inside Custom CSS section of Helix Ultimate or custom.css file.

Of course, you can reduce this value only for smaller selected screen sizes using @media. Example CSS syntax:

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

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

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!) is able to 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 fontsquirrel.com. Alternative max lite solution: http://webfonts.gidix.net/.  Or you can download Web Fonts from MyFonts.com.
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 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: https://www.youtube.com/watch?v=MfAIT8cMuv4