XenForo Tutorial

This tutorial explains how to configure different types of navigation layout. Tutorial applies to all styles based on Artodia styles framework.

What types of navigation are preconfigured in style?

All styles based on Artodia framework come with 3 preconfigured navigation layouts:

1. Basic layout. This layout is very similar to default XenForo navigation, but without tabs.


2. Tabbed layout. This layout is also very similar to default XenForo layout and it has tabs. User tabs can be displayed separately or as one big tab.



3. Alternative layout. This is unique layout that is not available in any other styles. Main navigation tabs are displayed as icons on right side of header. Below header there is only one row of navigation. Left side of that navigation displays links that are usually displayed on second row of navigation, right side of that navigation block displays user links.

How to configure layout

There are two check boxes that toggle navigation layouts: checkbox that enables alternative navigation and checkbox that enables tabbed navigation.

Those check boxes are located inside "Alternative Navigation" and "Tabbed Navigation" style property groups, located under "Header and Navigation" group:


Click those style property groups to see list of available options. First option in both groups toggles alternative or tabbed navigation:



You can have only one navigation layout active. Alternative navigation layout option has higher priority than tabbed navigation option, therefore if both tabbed and alternative navigation options are enabled, style will use alternative navigation.

To enable alternative navigation enable option "Enable alternative navigation".

To enable tabbed navigation, enable option "Enable tabbed navigation" and disable option "Enable alternative navigation".

To enable basic navigation, disable both "Enable tabbed navigation" and "Enable alternative navigation" options.

Alternative navigation

Alternative navigation moves tabs to header on client side and requires JavaScript to work. If JavaScript is disabled, user will see basic navigation layout instead.

To enable alternative navigation enable option "Enable alternative navigation".

To customize tabs edit style properties in "Alternative Navigation" style properties group.

Tabbed navigation

Unlike alternative navigation, tabbed navigation does not require JavaScript.

To enable tabbed navigation, enable option "Enable tabbed navigation" and disable option "Enable alternative navigation".

To customize tabs edit style properties in "Tabbed Navigation" style properties group.

Basic navigation

To enable basic navigation, disable both "Enable tabbed navigation" and "Enable alternative navigation" options.

To customize basic navigation layout edit style properties in "Header and Navigation" style properties group.

Problems

If you have any questions or ran into problems, please post your questions on support forum.