Install Mobile Menu CK

Template Creator CK allows you to easily create a mobile menu for your template using the plugin Mobile Menu CK.

> Download Mobile Menu CK for Joomla!

Once you have downloaded the extension Mobile Menu CK for Joomla, you must install it in your website

Admin >> Extensions >> manage >> install

Enable the mobile menu

Mobile Menu CK is not related to the template but related to the menu module. You must have a menu module published in a template position, then you can enable Mobile Menu CK for that menu.

Let's take an example with a row where you have added an horizontal menu block. You can edit your module directly by using the cogs icon

This opens a popup with the list of the modules available for this module position. You can edit the module from the Template Creator CK interface by clicking on the Edit button.

This opens the menu module in a popup. This is the native Joomla modules manager interface and you can do what you want with your module here. Go in the tab Mobile Menu CK and enable it.

Click on the Save and close button at the bottom of the popup to save the changes in the module and you will now see your mobile menu activated in the frontend of your website. You can play with the options of the Mobile Menu CK (not visible on the image above) to make your mobile menu behave as you want (resolution to show, effect, etc).

NOTE :

If you want to use the Mobile Menu CK, then you must not use the hamburger icon for that module position in the template. Click on the Mobile icon to enable the responsive settings, then check that the menu module has a horizontal alignment and not the hamburger icon. Else you will get 2 hamburger icons : from the template + from the Mobile Menu CK

How to create a full width area

Fullwidth background

Many designs needs to have an area where you can put a background color or image on the full width of the page, but keep the content aligned into the template width.

To add this image that covers the whole page width, edit the wrapper CSS and go in the Page Background options. Here you can set a background.

Fullwidth content

If you want to put the whole content of the wrapper as fullwidth, and not limited to the template width then you can click on the icon in the toolbar to switch the wrapper as fullwidth.

Here you content will take the whole page width.

Responsive design

Overview

Template Creator CK allows you to create a responsive design that will adapt to different devices. Click on the Responsive Design button in the top menu.

This will open the left panel edition and add the edition on each block / wrapper / row / column so that you can control anything.

On the left panel you will see the different resolutions / devices for which you can set the blocks behavior. Click on each device to see how your template will react. Example with the Phone / Portrait resolution :

Set your own resolutions

For each device you can define your own value (in px) where it will add a breakpoint in the CSS mediaqueries. By default the system gives some standard values :

You can change these values to adapt to your needs.

Between or Reducing ? This controls how you want the rules to apply. For example, if you set a row to be stacked vertically on a tablet, do you want the row to be stacked automatically on phones ?

YES : use reducing, the rules will only use the min-width selector and apply to all resolutions under the value

NO : use between, the rules will only apply between the breakpoints, from 950px to 758px for a tablet. The other resolutions will not be impacted by the changes.

Mini container width : this is the smallest container size that is given to your template on a Phone / portrait, if you have selected in the template parameters to be Fixed width design.

Responsive toolbars

On each block you will get a specific toolbar where you can set the behavior :

You can

1. align the items horizontally (behavior by default)
2. stack the items vertically
3. hide the block

On the menus blocks you will get another toolbar :

You can

1. show the block (behavior by default)
2. hide the block
3. show a hamburger icon that shows the menu on click

Responsive Custom CSS

In the left panel you can click on the button Custom CSS for responsive that is at the bottom. It will open a popup where you can write your own CSS rules for each resolution.

Responsive specific CSS classes

Template Creator CK helps you to manage any items in your website that you can hide on each resolution. It also adds the css classes to stack vertically the columns that you have create using the Template Creator CK CSS grid. Each class is added in the resolution according to the values that you have set (see above).

CSS Classes to hide the items

.tck-hide-desktop

.tck-hide-tablet-l

.tck-hide-tablet-p

.tck-hide-phone-l

.tck-hide-phone-p

You can use these CSS classes anywhere, into a module / widget, on any html tag in your page, exactly where you want.

CSS Classes to stack the items vertically (when using the Template Creator CK CSS grid)

.tck-stack-desktop

.tck-stack-tablet-l

.tck-stack-tablet-p

.tck-stack-phone-l

.tck-stack-phone-p

Row VS Aligned modules

The question : shall I use a Row or a Aligned module block ? What is the difference ?

Aligned modules / widgets

This is a block that contains up to 5 modules aligned horizontally. To see how to manage the number of modules, see the documentation about the Aligned modules layout.

In this example you will have 5 modules, each module have its own module position / sidebar name.

If you publish a module / widget in each position then the 5 columns will be shown.

If you publish only 2 modules / widgets then only these 2 columns will be shown. They will adapt automatically to take the whole width (there will be no blank space). You can manage this in the layout options of the block (see the documentation about the Aligned modules layout).

Row

This is a container with columns. In each column you can drag and drop any block from the left panel.

See the documentation about Row layout to learn how to manage the columns.

En empty column will be shown even if there is nothing in it. This is useful to create empty spaces, or to put a background image on a column. Note that you can style each column separately.