This chapter is all about answering the common questions (FAQ) that may appear while using Helix Ultimate 1.1.x.  If you have HU 2.0 please read the separate guide.

Where & How to use breadcrumbs

A “breadcrumb” is a type of secondary navigation scheme that reveals the user’s location in a website. By offering a breadcrumb trail for all pages (except homepage) on a large multi-level website, users can navigate to higher-level of pages more easily. Breadcrumbs may also appear in Google search results.

It's default feature from Joomla core, it comes with breadcrumb module. There are several ways of adding breadcrumbs to your Joomla site (with Helix Ultimate onboard).

Default method:
Publish Breadcrumbs module on "breadcrumb" module position and assign to selected menu items or set for all.

Alternative methods:

1. Publish breadcrumbs module on position "content-top" so navigation scheme will be published above component area.
2. In template settings > Layout tab, create a new Row - below or above "Title", select there "breadcrumb" module position and save settings. Then you will be able to publish module inside "breadcrumb" module position whatever it will be placed.

---

RTL Support

HelixUltimate supports RTL, but it takes advantage of the fact that virtually all modern browsers support it inherently. This enables you to use RTL in your site's content without any administrative toggles needing to be switched by the developer.

---

How to add a link to custom file

1. Copy file into the template folder 
2. Then in Helix Ultimate settings in Custom Code - "Before  < / head>" field add below code:

<link href="/templates/shaper_helixultimate/custom-file.css" rel="stylesheet"  />

 *Instead ".css" use your file type.

---

How to hide Header (or only Menu) on selected page

In most cases you need to hide whole Template Header or only menu building a Landing Page. General purpose of any landing page is to capture a visitor’s information . That's why it usually includes a compelling header, interesting copy, minimal navigation, and an optimized form.

There are several methods to achieve minimalistic design. We suggest to use SP Page Builder (Pro) for those pages and one of below methods:

1. Duplicate Helix Ultimate Template Style, and on copy just disable predefined header. Then assign that Template copy to selected Page(s) only.
2. If on that Landing Page you used (will use) SP Page Builder in Page Options > CSS section use below custom CSS code to hide whole header:

#sp-header {display: none !important; opacity: 0;}

Or to hide only MENU column use:

#sp-menu {display: none !important; opacity: 0;}

---

Can I build/change predefined Header

Yes, with Helix Ultimate update 1.0.2 - we moved predefined headers to the template folder: templates\shaper_helixultimate\headers.
This folder by default contains two styles (1 and 2). You can analyze the file (header.php) code and build your own header layout. The image file (thumb.jpg) is only needed to visualize the appearance. We strongly suggest creating a new "style3" which won't be overridden by template update.

---

How to change the height of predefined header

You have to use custom CSS. The default value is, in most cases, 60px. Below is example code that will help you switch to 90px (increase height). All elements like the menu and logo would be in the middle of the header.

#sp-header, #sp-header .logo {height: 90px; }
#offcanvas-toggler {height: 90px; line-height: 90px;}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {line-height: 90px;}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item {line-height: 30px;}

---

How to reduce  Header height on scroll down

In the current example, I will show you how to reduce Header (predefined) height to value 65px and change its background color to more transparent. Yes, you have to use custom CSS:

#sp-header.header-sticky {height: 65px; background: rgba(255,255,255,0.8);}
#sp-header.header-sticky .sp-megamenu-parent > li > a, 
#sp-header.header-sticky .sp-megamenu-parent > li > span 
{line-height: 65px;}

---

How to make top-bar position transparent

If your template (based on Helix Ultimate) use background image on home page you can using CSS make top-bar transparent or almost transparent. Here is example code:

#sp-top-bar {
    background-color: rgba(0,0,0,0.4);
    position: absolute;
    height: 40px;
    top: 1px;
    width: 100%;
    z-index: 99;
}

 

---

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 space between menu items. Below is 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.

Tip: You can also reduce font size used in navigation, but this time, just by settings from Typography tab.

---

How to change Menu items font color

In Helix Ultimate template or template based on Helix  you can change color by custom CSS code:

/* Menu items color */
.sp-megamenu-parent > li > a {color: blue;}

/* Active color of menu item */
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a { color: green; }

/*  Color of hover menu item */
.sp-megamenu-parent > li > a:hover, .sp-megamenu-parent > li:hover > a  { color: red; }

---

How to change Menu items font size

In Helix Ultimate template or template based on Helix  you can do this using font settings from Typography tab or by custom CSS code:

.sp-megamenu-parent > li > a,  .sp-megamenu-parent > li > span {font-size:15px;}

In template styles by default we used font-size :14px, so 2px more means bigger letters and so on.  Instead px you can use rem, em or %.

Font size also depend on used font family, some fonts seems to be bigger than others.

---

How to change Menu items font weight

In Helix Ultimate template or template based on Helix  you can do this from template settings (Typography) or using custom CSS code:

#sp-header .sp-megamenu-parent > li > a { font-weight: bold;} 

The font-weight property sets how thick or thin characters in text should be displayed. The font-weight property accepts either a keyword value or predefined numeric value. Font weight is dependent either on available font faces within a font family or weights defined by the browser.

/* Numeric keyword values */
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;

---

How to highlight submenu items

By default when you mouse hover on submenu item only color is changed, but you can also add background change effect. Here is basic example code:

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {padding-left:10px; padding-right:10px;}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {padding-left:10px; padding-right:10px;}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover {background: #00B9F1;}

---

How to change background color of dropdown menu

Example custom CSS code to change background color from white to green:

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {background: #2BA84A;}

To change color of submenu (dropdown) menu items add also this:

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {color: yellow;} 
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > a {color: red;}

---

How to increase size of off-canvas menu [=] icon

You have to use simple line of custom CSS code:

#offcanvas-toggler i {font-size: 32px;}

---

How to change color of menu [=] icon

You can easily change color of hambuger icon, as well. You should use simple line of custom CSS code: 

#offcanvas-toggler > i.fa {color: red;}

You can join and increase icon [=] size and color in single CSS line:

#offcanvas-toggler > i.fa {font-size:32px; color: red;}

 

In some new templates based on Helix Ultimate you have to use a little bit different code:

#offcanvas-toggler span, .icon-bar > span {border-bottom: 2px solid red;}

---

Mobile Menu BreakPoint

You can force to show mobile menu [=] faster by using custom CSS. Example for screen resolution 1200px and all smaller.

@media (max-width: 1200px) {
#offcanvas-toggler {display: block !important;}
#sp-menu .sp-megamenu-parent {display: none !important;}
}

---

Off-canvas Menu customization

To change off-canvas background color use following custom CSS:

.offcanvas-menu  { background: yellow;}

To change color of menu items inside Off-canvas use:

.offcanvas-menu .offcanvas-inner .sp-module ul > li a,
.offcanvas-menu .offcanvas-inner .sp-module ul > li span { color: red; }

To add bottom lines for menu items inside Off-canvas use:

.offcanvas-menu .offcanvas-inner .sp-module ul > li {
    border-bottom: 1px solid black;
    padding-left: 5px;
}

To use background color under Off-canvas menu items only, like in the screenshot below

Please use following custom CSS code:

.offcanvas-menu .offcanvas-inner { padding: 30px 0px; }

.offcanvas-menu .offcanvas-inner .sp-module ul > li {
    background: #0074E8;
    margin-bottom: 1px;
    padding: 0 20px;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li.current.active,
.offcanvas-menu .offcanvas-inner .sp-module ul > li:hover,
.offcanvas-menu .offcanvas-inner .sp-module ul > li:focus,
.offcanvas-menu .offcanvas-inner .sp-module ul > li:hover a,
.offcanvas-menu .offcanvas-inner .sp-module ul > li:focus a
{background: #035AB2; color: #eee;}

.offcanvas-menu .offcanvas-inner .sp-module ul > li a, 
.offcanvas-menu .offcanvas-inner .sp-module ul > li span { color: yellow;}

To change (increase) font-size of menu items in off-canvas menu use:

.offcanvas-menu .offcanvas-inner .sp-module ul > li a,
.offcanvas-menu .offcanvas-inner .sp-module ul > li span { font-size: 1.2rem;  }

You can use bigger font size value: 1.5rem or 2rem, as well.

To increase size of submenu items please use:

.offcanvas-menu .offcanvas-inner .sp-module ul > li ul li a 
{ font-size: 1.1rem; }

You can use bigger font size value: 1.3rem, 1.5rem or 2rem. Instead "rem" you can use "px" as well.

---

How to display all submenu items in off-canvas menu

It's possible, but it requests using custom CSS:

.offcanvas-menu .offcanvas-inner .sp-module ul > li ul {display: block;}

---

How to hide submenu block

You have two alternative methods:

Method #1:
For each sub-menu item choose: Link Type > Display in Menu > No   (Hidden).

Method #2:
Use   custom CSS to achieve it:

1. Add class name:  hidebelow - to sub-menu item under which you do not need submenu items, and you want to keep only menu item without any arrows.
   
2. Inside dedicated Custom CSS text-area from Helix Ultimate settings put below code:
   

   li.hidebelow .sp-dropdown.sp-dropdown-sub,
   .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child.hidebelow > a::after 
   {display: none !important;}?

---

How to center main menu

In most cases you have to add only single line of custom CSS:

.sp-megamenu-parent {float: none;}

---

How to create second top menu

By default, only one Menu can use Mega Menu from Helix Ultimate engine. If you need 2nd menu with MegaMenu features, you have two options:

• Customize Helix Code (on your hands only, beyond support)
• Find on Joomla Extension Directory MegaMenu Module and install it, then publish on a module position. You can create a new Row in layout and use this new position for the new menu.

But if you want a simple menu only (without submenu), with a single level, all you need is menu module and some Bootstrap 4 classes.

1. Inside Menu module setting > "Basic" tab:
   Show Sub-menu Items: No
   Show Title: Hide
   Position: choose active from template module positions
2. Inside Menu module setting > "Advanced" tab (screenshot below):
   Menu Class Suffix: nav menu navbar-nav navbar
   Module Class Suffix: navbar navbar-expand-sm
3. Choose menu module position it can be "top2" or a new one created in Layout (Helix Options).
4. Then inside each menu item used there: Link Type > Link Class > nav-link

The final result (MegaMenu and 2nd Menu under, in row below the header):

---

How to make header transparent

To add default header (after scroll down) transparency effect we suggest to use CSS3 alpha channel color functional. It allows you to set the background color to a lower opacity by using the RGBA (Red-Green-Blue-Alpha) model. Below is example custom CSS code which you can use:

Syntax:

#sp-header {background: rgba(255,255,255,0.5);}

Where the values of each color in RGB can be an integer between 0-255, and the value of Alpha is a number between 0-1 where 0 is fully transparent and 1 is fully opaque. And 0.5 is half transparent.

It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.

---

How to use a custom font(s)

 In this video guide ( YouTube link ) you will see how to use self hosted fonts in Helix Ultimate template. Useful for custom fonts (that not part in the Google font family) for text elements. In below example I used font AMATIC , designed by: Vernon Adams. To generate webfonts format and CSS code - I used 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 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.

WATCH SHORT VIDEO (click ">" play)

According to stats, between 80-95% of browsers support the WOFF (WOFF 2.0) format. 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).

Extra tip:

If you’re hosting and embedding fonts on your Joomla site, supporting .woff2 is simple: once you have the font file converted and uploaded, simply address it in your CSS as you would any other. Specify the .woff2 version at the start of the declaration, so that compatible browsers will load it and not the older .woff version:

@font-face {
	font-family: MyFont;
	 src: url(myfont.woff2) format ('woff2'),
	url(myfont.woff) format ('woff');
}   
p, h1, h2 {font-family: MyFont;}

---

How to use Google Fonts from my server

Using Google Fonts servers (https://fonts.googleapis.com) may be problematic in the EU beginning of may 2018. Because of GDPR law regulations (privacy statement), private policy or performance benefits some webmasters need load Google Fonts directly from their server (locally) not Google. Yes, Google allows hosting their fonts in Joomla directory. Beside by using local fonts you have full control over the caching of your font files.

1. On https://fonts.google.com  - choose exactly this same fonts which you used or want to use inside your template.
2. To download fonts, simply create a selection of fonts, open the drawer at the bottom of the screen, then click the "Download" icon in the upper-right corner of the selection drawer. 
   
3. In most cases downloaded package contain only .ttf (True Type) file format. 
4. The alternative way to grab the Google Fonts is to use the free google-webfonts-helper tool.
5. Now you have to use tip described above "How to use custom fonts" to load Google Font(s) up using @font-face.
6. Please make sure you have the right destination for the font files, which depend on where you want to put them on your server.
7. Then you can disable all Google Fonts options from template "Typography" tab. Otherwise, you might be loading both your local fonts and the Google Fonts.
   
   
   That is it for this tip on how to host Google fonts locally.

Legal notice: The Google Fonts is designed to limit the collection, storage, and use of end-user data to what is needed to serve fonts efficiently. Use of Google Fonts is unauthenticated. No cookies are sent by website visitors to the Google Fonts API. Google Fonts are complied with the EU-US and Swiss-US Privacy Shield Frameworks which correspond to GDPR. But in 2021 the German court (EU) deemed this a violation of Europe’s GDPR (General Data Protection Regulation) because Google Fonts exposes the visitor’s IP address. The automatic transmission of the IP address by the defendant to Google was an inadmissible encroachment on the plaintiff’s general personality rights under data protection law, since the plaintiff in this encroachment was undisputedly not in accordance with Section 13 (2) TMG old version, Art. 6 (1) a ) GDPR has consented.

---

Error 403 on front-end editor

If you noticed error message "403. This request is blocked by Admin Tools" and have Akeeba Tools Pro installed you have to make small configuration change:

Go to Admin Tools: Web Application Firewall > Configure WAF > Cloaking and set "Allow site templates" to "Yes" - then it will be fixed!

---

Header with logo and menu gone after update

If after update to Helix Ultimate 1.0.5 the whole header with menu and logo menu disappeared (have gone / No predefined header) easy to fix in less than 60sec:

1. Download Helix Ultimate template 1.0.5 package.
2. Upload to your website (re-install)
3. Edit the template settings.
4. Go to Layout builder
5. In Predefined headers > Enable Predefined Headers they may be Off
6. Then select one of the two headers
7. Save settings
8. Clear Joomla and browser cache after template update !

You don't have to uninstall old version. 

---

How to hide modules on mobile/tablet

There are many use cases for the responsive display of elements (modules). Maybe You need to show a module only on desktop screens, or hide an element only on phones and tablets, or show a module within a view-port range such as tablets. To hide module(s) on selected resolution (mobile/tablet) you can use:

1. Bootstrap 4 classes in Module Class Suffix field because Helix Ultimate use Bootstrap v4.1.x
2. Extra extension Advanced Module Manager Pro (from Regular Labs)

About point 1 - if you want to hide an element (module) on specific tiers (breakpoints) in Bootstrap 4, use the `d-*` display classes accordingly. Here are official tip which should help you about Display property.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

Screen Size	Class
Hidden on all	.d-none
Hidden only on xs	.d-none .d-sm-block
Hidden only on sm	.d-sm-none .d-md-block
Hidden only on md	.d-md-none .d-lg-block
Hidden only on lg	.d-lg-none .d-xl-block
Hidden only on xl	.d-xl-none
Visible on all	.d-block
Visible only on xs	.d-block .d-sm-none
Visible only on sm	.d-none .d-sm-block .d-md-none
Visible only on md	.d-none .d-md-block .d-lg-none
Visible only on lg	.d-none .d-lg-block .d-xl-none
Visible only on xl	.d-none .d-xl-block

Below you can find Bootstrap 4.x display tiers/breakpoints:

// Extra small devices (portrait phones, less than 576px)
default (max-width: 575px)

// Small devices (landscape phones, 576px and up)
(sm) small (min-width: 576px) and (max-width: 767px)
 
// Medium devices (tablets, 768px and up)
(md) medium (min-width: 768px) and (max-width: 991px) 

// Large devices (desktops, 992px and up)
(lg) large (min-width: 992px) and (max-width: 1199px) 

// Extra large devices (large desktops, 1200px and up)
(xl)

Note! Classes hidden-* and visible-* from the older Bootstrap 2.x and 3.x versions are not used in Bootstrap 4.x anymore.

---

How to change colors in off-canvas box

You can easily change bg color and colors of links (menu items) used in off-canvas (mobile menu) area:

.offcanvas-menu {background: #ccc;}

.offcanvas-menu .offcanvas-inner .sp-module ul > li a, 
.offcanvas-menu .offcanvas-inner .sp-module ul > li span,
.offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > a > .menu-toggler 
{color: white;}

---

How to use different custom css file for multiple styles of the same template

By default is not possible, because technical for Joomla it's still this same template. But it's very easy to solve:

1. The first step, forget about "custom.css" filename.
2. If you already have "custom.css" file rename to "custom_one.css" or choose different name.
3. Create second file for custom CSS style, for example, name it: custom_two.css.
4. Put both of them inside /css/ folder of Helix template.
5. In template settings (both of them, separetly) > Custom code > Code in Header add:

In first, probably default, style template settings add:

<link href="/templates/shaper_helixultimate/css/custom_one.css" rel="stylesheet" type="text/css" />

In Second template style - also settings add:

<link href="/templates/shaper_helixultimate/css/custom_two.css" rel="stylesheet" type="text/css" />

Now clear Joomla and Browser cache, on each template style different custom CSS file should be loaded. This same method you can use for any other Helix template, but remember to correct/change template filename and file path - if necessary.

---

How to remove border from module

Using custom CSS you can remove border from modules published on left and right module position:

To remove border under module title use:

#sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title {
    border-bottom: none;
    padding-bottom: 10px; }

To remove border around module use:

#sp-left .sp-module, #sp-right .sp-module {
    border: none;
    padding: 20px; }

---

How to set sticky/fixed footer

Learn how to create a fixed/sticky footer with custom CSS:   

#sp-footer { position: fixed;
    width: 100%;
    height: 30px;
    bottom: 0px; left:0px;
    background: #333; color: #fff;
}

In our example I used dark color for footer.

---

READ ALSO:
https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action