Just select the items source to 'H2' and Sticky Navigator creates the respective Items
The Sticky Navigator Module adds an amazing extremly customisable vertical Sticky Navigator menu to your website. Ideal to scroll and navigate on onepage sites using the Joomla system menu as source or you can use a custom css selector as a source and Sticky Navigator Creates the items accordingly. Use predefined css themes and fully customise text- and background styles, symbols ( Font Awesome, Google Icons,..) and many effects. Include Responsive functionality. Include a Button to Hide or Show the Menu.
The spacer represents the space between two Menu Items.
- Frontend diagram

- Overview - Spacer Settings Panel

- Spacer Detail:
Displays spacer: With this option you can hide the spacer directly. This overwrites the settings below.
- Modify Spacer:
Activates the options to modify the Spacer
- Spacer height:
Sets the height of the spacer.
Units: px, em, ex, %, in, cm, mm, pt and pc. Values: inherit|initial|auto|unset are allowed. Negative values are not allowed.
Use „ignore“ to ignore the property.
- Horizontal offset:
Sets the horizontal offset.
Units: px, em, ex, %, in, cm, mm, pt and pc. Values: inherit|initial|auto|unset are allowed. Negative values are allowed.
Use „ignore“ to ignore the property.
- Spacer width ( eq. to css border-style):
Values: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Mode ignore: Will not change the border property.
- Spacer Style:
Predefined values: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Mode ignore: Will not change the border property.
- Border color ( eq. to css border-color):
Sets the background color of the menu. See common control color to set it.
- Frontend diagram
- Overview - Spacer Settings Panel closed options
- Overview - Spacer Settings Panel opened options
- General Text Settings
Display Text:
Mode „display“: Shows the menu item Text always.
Mode „hide“: Hide the Text always.
Mode „hover“ ( only desktop devices ): Shows the menu item only by mouse hover.
- Maximum text length:
Set the maximum text length. If the text is cut the system will add '..' to the end of the text.
Units: px, em, ex, %, in, cm, mm, pt and pc. Values: inherit|initial|auto|unset are allowed. Negative values are not allowed.
Use „ignore“ to ignore the property.
- Maximum Resp. text length:
Set the maximum text length for the Responsive width set in „Behaviour and effects“ -> „Responsive width:“. If the text is cut the system will add '..' to the end of the text.
Units: px, em, ex, %, in, cm, mm, pt and pc.
Values: inherit|initial|auto|unset are allowed. Negative values are not allowed.
Use „ignore“ to ignore the property.
- Hide Text if Responsive:
Choose „Yes“ to hide the Text if the window width is smaller then the Responsive width set in „Behaviour and effects -> „Responsive width:“.
Font Settings for Normal State:
- Modify Normal Text:
Activate the options to modify the Normal Text.
- Font Style:
Modify the Font and Text Style for the Normal State.
See „Common controls -> Font Style control“.
- Set Color:
Set the Font color for the Normal State.
See „Common controls -> Font Style control“.
- Modify Shadow:
Set the Text shadow for the Normal State.
See „Common controls -> Shadow control“.
- Text Settings for Active / Hover State:
Same as above „Text Settings for Normal State“ but for active / hover Text.
Overview -
Symbols Settings for Normal State:
General Symbols Setting:
- Display Symbols:
Choose „hide“ to hide the symbols.
- Modify Symbols:
Choose „yes“ to enable the Symbols dialog.
Symbols Normal Setting:
- Set the Symbols size:
( see Common Controls - Font Style control - Font Size ).
- Set color:
Set the Symbol color ( see Common Controls - Color control ).
- Set Symbol:
sSet the Symbol ( see Common Controls - Symbols control ).
- Set Margin:
Set Symbol Margin ( see Common Controls - Margin control ).
Symbols Hover Setting:
- Symbols Hover Setting:
Same as above „Symbols Normal Setting“ but for active / hover Symbols.
- Propouse:
This Buttons are used to hide or display the Sticky Menu manually.
After clicking the Hide Button the Menu will disappear and the Show Button will be visible.
So you can switch between hide and display the Sticky Menu.
- Frontend diagram

- Overview - Hide / Show Buttons Panel:
General Settings:
- Use Hide / Show Buttons:
Choose „Yes“ to use and enable the usage of the Hide / Show Buttons.
- Hide and Show effect:
Move Left: The Menu disappear moving to the window left side.
Move Right: The Menu disappear moving to the window right side.
Simply Hide or show the buttons.
Hide Button Settings:
- Set Position:
Set the Position ( see Position control ) of the Hide Button.
The position reference is the Sticky Menu.
- Set Symbol:
Set the Symbol ( see Common Controls - Symbols control ).
- Set color:
Set the Symbol color ( see Common Controls - Color control ).
- Optimize Legibility:
Could enhance text legibility. Improve text-rendering, font-smoothing and add a text-shadow to the text. Tipp: You can use the Text Shadow settings ( below ) option to increase the contrast between the text and the background.“ Set Size: Set the Symbols size ( see Common Controls - Font Style control - Font Size ).
Show Button Settings:
- Set Position:
Set the Position ( see Position control ) of the Hide Button.
The position reference is the hole screen.
- Set Symbol:
Set the Symbol ( see Common Controls - Symbols control ).
- Set color:
Set the Symbol color ( see Common Controls - Color control ).
- Optimize Legibility:
Could enhance text legibility. Improve text-rendering, font-smoothing and add a text-shadow to the text. Tipp: You can use the Text Shadow settings ( below ) option to increase the contrast between the text and the background.“ Set Size: Set the Symbols size ( see Common Controls - Font Style control - Font Size ).
- Overview - Behaviour and effects

Responsive settings:
- Maximum Items:
Set the maximum of Menu Items.
- Responsive width [px]:
If the Window width is less then this value, the module will work in responsive mode.
- Responsive class name:
This class will be added to the module container ( only if the module is in responsive mode ).
- Show navigator if:
Desktop and responsive: if the Menu is Visible and working on responsive and desktop mode.
Only responsive: Shows the Menu only under responsive mode.
Only desktop: Shows the menu only under desktop mode
- Other settings:
Show on mouse over:
Choose „Yes“ to show the menu on mouse over.
Note: This option has not effect for mobile devices.
- Hide Menu after timeout [ms]:
When you stop scrolling the menu hides after the set timeout. When you start scrolling again it will show up and reset the timeout. (Default is 1000)[ms]. Set to '0' for hide immediately and a very hight value (1000000) to show it always.
Tipp: Set to a hight value when you are styling the menu.
- Start displaying at position [px]:
This option hides the menu until a specific window position:y [px]. This makes sure the navigator does not interfere with a slider or menu you may have at the top.
- Scroll position offset [px]:
You can set an offset to the scrolling destination to correct the final position [px]. Negative values are allowed.
- Scrolling animation:
Select an animation effect.
The standard effects are swing and linear. Following effects are available:
easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce.
- Animation duration [ms]:
Set the time for the animation in milliseconds (default: 600). Less ms for a faster effect.
- Update Menu while Animating:
if performance is affected heavily by the scrolling animation you trigger through the sticky menu, choose 'no' to save resources. Performance: All similar extensions use Java Script functions called while the user is scrolling the page. This need a lot of processor resources. We programmed this extension to use the smallest amount of resources to increase the performance. Depending on the clients browser, clients device and other extensions which use the same event types the performance is reduced and scrolling the page may not be smooth. We added some options to increase the performance.
- Resource saving level:
if performance is affected heavily while scrolling manually, increase this level to save resources. For example Level 2 will use and call functions each 4 scrolling events. Performance: All similar extensions use Java Script functions called while the user is scrolling the page. This needs a lot of processor resources. We programmed this extension to use the smallest amount of resources to increase the performance. Depending of the client browser, client device and other extensions which use the same event types the performance is reduced and scrolling the page may not smoothing enough. We add some options to increase the performance.
- Multiinstance Mode:
Allow use more then 1 sticky navigator at same page.
Default is 'No'. Set to 'Yes' only if is necessary.
- Color control:
Change color and opacity for rgba, rgb and hexa color format.
- Mode ignore: Will not change the color property.

- Mode „RGBA“: Change the color in RGBA format using the color picker or typing the value.
- Mode „RGB“: Change the color in RGB format using the color picker or typing the value.
Mode „HEXA“: Change the color in HEXA format using the color picker or typing the value.
- Radius control:

Modify Radius ( equivalent to border-radius css property):
- Choose „No“ will not modify the Radius.
- Choose „Yes“ will show you the radius dialog.
Set the radius property:
Allowed units and values are:
- Units: px, em, ex, %, in, cm, mm, pt and pc. Initial and inherit are allowed.
- Negative values are not allowed.
- Use „ignore“ to ignore the property.
- Padding:
Set the he Padding property ( equivalent to padding css property):
Use Padding:
- Choose „No“ will not modify the padding.
- Choose „Yes“ will show you the padding dialog.
Set the padding property:
Set the values for Top, Bottom, Right and Left ( See padding diagram ).
Allowed units and values:
- px, em, ex, %, in, cm, mm, pt and pc. Initial and inherit are allowed.
- Negative values are not allowed.
- Use „ignore“ to ignore the property.
- Margin control:
Modify the Margin between the symbols, spacer and text ( use the css margin property ).
Modify margin:
- Choose „No“ will not modify the margin.
- Choose „Yes“ will show you the margin dialog.
Set the margin property:
Set the values for Top, Bottom, Right and Left ( See margin diagram ).
Allowed units and values are:
- px, em, ex, %, in, cm, mm, pt and pc. Initial and inherit are allowed.
- Negative values are allowed.
- Use „ignore“ to ignore the property.
- Position control:
Modify Position:
- Choose „No“ will not modify the Position.
- Choose „Yes“ will show you the position dialog.
Position reference:
Top Right:
Reference is the top - right screen corner.
Enter the Horizontal and Vertical Values.
Top Left: Reference is the top - left corner.
Enter the Horizontal and Vertical Values.
Bottom Right:
Reference is the bottom - right screen corner.
Enter the Horizontal and Vertical Values.
Bottom Left: Reference is the bottom - left corner.
Enter the Horizontal and Vertical Values.
Center Left: The menu is Vertical centred.
Reference is only the Left of the screen
Enter the Horizontal Value.
Center Right: The menu is Vertical centred.
Reference is only the Right of the screen
Enter the Horizontal Value.
Allowed units and values are:
- px, em, ex, %, in, cm, mm, pt and pc. Initial and inherit are allowed.
- Negative values are allowed.
- Use „ignore“ to ignore the property.
- Font Style control:
Here you can set css properties for font and text.
Font Family ( eq. css Font-Family ):
Select a Font from the predefined Font Families or Type a custom Font. The custom Font must be available on the site.
Font Size ( eq. to css font-size ):
Select a predefined size (ignore, initial, medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger) from the list or type a custom size.
Allowed units and values are:
- px, em, ex, %, in, cm, mm, pt and pc.
- Predefined Values: , initial, medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger.
- Initial and inherit are allowed.
- Negative values are not allowed.
- Use „ignore“ to ignore the property.
Font weight ( eq. to css font-weight ): Select the predefined Values or type your own one.
- Negative values are not allowed
- Use „ignore“ to ignore the property
Font style, Text decoration and Text Transform ( eq. to respective css properties ):
Choose the respective values from the displayed list.
- Symbols control
Type HTML Symbol: Set the UTF-8 hexa symbol code: For example if you like to use '⊚' (#x0229A) just write ‚0229A'. Look at https://dev.w3.org/html5/html-author/charref for more symbols.
Type Font awesome:
In order to set a Symbol, type the Awesome Symbol class you like. You can find all symbols under http://fontawesome.io/icons/"
Type Google Icons ( material ):
In order to set a Symbol, type the Google Symbol you like. You can find all symbols under https://material.io/icons/
Type image:
Select Image:
Select a Image from list. These images are saved under ‚media/mod_sticky_navigator/images/symbols/'.
Explore Image:
You can optionally use this media file manager to upload and select your own images.
If you choose to use this option be sure to set the 'Select Image' to '-None Selected-'.
- Shadow control
Text Shadow can be very useful to increase the contrast between the text and the background.
Modify Shadow:
- Choose „No“ will not modify the shadow.
- Choose „Yes“ will show the shadow dialog. Horizontal Text Shadow [px]:"
Set Horizontal Position of the Text Shadow [px]:
Negative Values are allowed.
Vertical Text Shadow [px]:“
Set Vertical Position of the Text Shadow [px].
Negative Values are allowed.
Blur Radius [px]:
Set the blur radius.
Shadow color:
Use the color dialog to set the shadow color.
Optimize Legibility:
Could enhance text legibility. Improve text-rendering, font-smoothing and add a text-shadow to the text. Tipp: You can use the Text Shadow settings ( below ) option to increase the contrast between the text and the background."