Demo 1: Sticky Navigator using 'H2' as items source.

Just select the items source to 'H2' and Sticky Navigator creates the respective Items

Introduction

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.

Main Features:

• Extremly customizable
• No programming skills required
• Predefined themes.
• Over 20 predifined scroll effects
• don't limit yourself to pixels, use the units you prefer! : px, em, ex, %, in, cm, mm, pt and pc  initial, medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger (with life validator)
• Creates items from the system menu ( ideal for onepage sites )
• Creates items using predefined selectors like h2, h3, h4, sections.
• Creates items from a custom css selector. ( ideal to automatically create an index of a long content page or blogs ).
  For example for K2 content: '.k2-item h3' to match all ‚h3' inside the k2Container.
• More than 1000 symbols! Unicode / Font Awesome / Google Icons or your own images
• Optimize text legibility
• Customize width, margins, padding, colors, opacity, border style, border radius, shadows, text and font styles and much more.
• Individually for normal or active/hover state.
• Responsive functionalityt
• Add customs css in backend without modifiying any file.
• Individual customization for normal and hover states.
• Use confortable common controls to modify:
  Positions, margins, padding,
  color and opacity (using color picker for rgb, rgba and hex format),
  symbols (Unicode / Font Awesome / Google / jpg, png ),
  font and text styles.
  Optimize legibility
  
  Take a look at the manual to discover much more!

Installation

1. General:

   This section describes the main points to install the Sticky Navigator Module.

   We strongly recommend you to read the following documentation:
   Installing extensions: https://docs.joomla.org/Installing_an_extension/en.

   Module Manager.: https://docs.joomla.org/Help38:Extensions_Module_Manager.

2. Startup:

   Download Sticky Navigator from our Website www.w3smart-tools.com.

3. Create a new Module:

   

    

4. Select the mod_sticky_navigator Module Type
   

   

5. Set the Title and the Template Position

Module

1. Overview - Module Panel:

   

2. Set the Download ID

   The Download ID enable this extension to get Updates during the Sticky Navigator subscription is active.
   Joomla will inform you when a newer Version is ready to install.
   You will find your Download ID under following Link: https://w3smart-tools.com/account/my-downloads-ids.
   Copy your Download ID and paste it in to this field.
   
   

3. Select the Sticky Navigator Source

   
   Following types are available:
   From System Menu:
   Get the Menu items from the Joomla system menu.
   Note: Must include an „#“ symbol corresponding to the pageID.
   For example: Matching the section id service.
   
   
   
   Choose h1, h2, h3 or h4: 
   To match the respective heading items in the whole document.
   
   Choose section:
   To match sections. Ideal to use in onepage sites.
   
   Alternatively choose 'Custom CSS Selector':
   To specify your own custom selector ( see below in the 'Custom Selector' field ).
   
   
   
   In this case you will able to set a custom selector:
   Specify a CSS selector:
   This will generate menu items for all matching elements. Example for joomla content: '.item-page h3’ to match all 'h3' elements inside the joomla content. Example for K2 content: '.k2-item h3' to match all ‚h3' in 'div#k2Container div.itemContainer’.
   Note: Sticky Navigator will get the text from the corresponding text content.

4. Enable / Disable

   Java Script and jQuery:
   Here you can disable java script to discard any conflict with other extensions.
   TIP: Disable java script while you customize the Sticky Menu. This will stay always on the top.
   Enable jQuery framework:
   This extension needs the jQuery framework which is already enabled in Joomla by default.

Theme and Basic Settings

1. Overview - Theme and basic Settings  
   

2. Select a css theme
   Select the base .css file. This file defines the style and position of the Sticky Navigator Module. In the entire Module you will always be able to maintain the values as in the original file or overwrite it. Use modify „no“ or "ignore" to leave the original values.

3. Use only css file:

   If is set to „yes“, you will only be able to change text and symbol orientation. All other styling options will be ignored and the module will work only according to the .css file.

4. Text and symbol orientation:

   Symbol right: The text is at the left and the symbols at the right.
   Symbol left: The text is at the right and the symbols at the left.

5. Attach custom css:

   Here you have the possibility to add additional css properties.

6. Note: How to copy / modify themes in the .css files?

   All themes are saved on YourSite/media/mod_sticky_navigator/css/. The original files have the „w3st-“ prefix. The default theme is w3st-default.css Please do not modify the original themes because they may be overwritten by the next update. You can copy and modify any theme. Please do not use the „w3st-„ prefix as a theme name. If you like to modify some properties in your frontend theme you may use the !important option to get it work.

Style and Position

1. Frontend diagram

   
   

2. Overview - Navigator Style and Position Panel

     
   
   

3. Overview - Navigator Style and Position panel with all open dialogs.

   
   

4. Modify Menu position, width and style:
   • Choose „No“ to disable the whole panel.
   • Choose „Yes“ will enable the panel for modifications.

    

5. Use the Position control to set the Menu Position:
   
   
6. Menu width:

   Sets the width of the menu:
   Default is ‚auto‘. If it is set to ‚auto‘ the menu will get the width from the child elements.
   Allowed units are: 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.

7. Background color ( eq. to css background-color ):

   Sets the background color of the menu. See common control color to set it.

8. Border Style ( eq. to css border-style):

   Predefined values: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
   Mode ignore: Will not change the border property.

9. Border color ( eq. to css border-color):

   Sets the background color of the menu. See common control color to set it.

10. Border radius ( eq. to css border-radius):

    See common control radius to set it.

     

Spacer

The spacer represents the space between two Menu Items.

1. Frontend diagram
   
   

   
   

2. Overview - Spacer Settings Panel

   
   

3. Spacer Detail:

   Displays spacer: With this option you can hide the spacer directly. This overwrites the settings below.

4. Modify Spacer:

   Activates the options to modify the Spacer

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

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

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

8. Spacer Style:

   Predefined values: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
   Mode ignore: Will not change the border property.

9. Border color ( eq. to css border-color):

   Sets the background color of the menu. See common control color to set it.

Text/Symbols

1. Frontend diagram
   
2. Overview - Spacer Settings Panel closed options
   
   
   
3. Overview - Spacer Settings Panel opened options
   
   
4. 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.

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

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

7. 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: 
   
   
8. Modify Normal Text:

   Activate the options to modify the Normal Text. 

9. Font Style:

   Modify the Font and Text Style for the Normal State.
   See „Common controls -> Font Style control“.

10. Set Color:

    Set the Font color for the Normal State.
    See „Common controls -> Font Style control“.

11. Modify Shadow:

    Set the Text shadow for the Normal State.
    See „Common controls -> Shadow control“.

12. 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:
    
13. Display Symbols:

    Choose „hide“ to hide the symbols.

14. Modify Symbols:

    Choose „yes“ to enable the Symbols dialog.
    
    

     Symbols Normal Setting: 
    
15. Set the Symbols size:

    ( see Common Controls - Font Style control - Font Size ).

16. Set color:

    Set the Symbol color ( see Common Controls - Color control ).

17. Set Symbol:

    sSet the Symbol ( see Common Controls - Symbols control ).

18. Set Margin:

    Set Symbol Margin ( see Common Controls - Margin control ).

     Symbols Hover Setting: 
    
19. Symbols Hover Setting:

    Same as above „Symbols Normal Setting“ but for active / hover Symbols.

Hide/Show Buttons

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

2. Frontend diagram
3. Overview - Hide / Show Buttons Panel:

   

    General Settings: 
   
4. Use Hide / Show Buttons:

   Choose „Yes“ to use and enable the usage of the Hide / Show Buttons.

   
   
5. 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: 
   
6. Set Position:

   Set the Position ( see Position control ) of the Hide Button.
   The position reference is the Sticky Menu.

7. Set Symbol:

   Set the Symbol ( see Common Controls - Symbols control ).

8. Set color:

   Set the Symbol color ( see Common Controls - Color control ).

9. 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: 
   
10. Set Position:

    Set the Position ( see Position control ) of the Hide Button.
    The position reference is the hole screen.

11. Set Symbol:

    Set the Symbol ( see Common Controls - Symbols control ).

12. Set color:

    Set the Symbol color ( see Common Controls - Color control ).

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

Behaviour and effects

1. Overview - Behaviour and effects
   
   
    Responsive settings: 
2. Maximum Items:

   Set the maximum of Menu Items.

3. Responsive width [px]:

   If the Window width is less then this value, the module will work in responsive mode.

4. Responsive class name:

   This class will be added to the module container ( only if the module is in responsive mode ).

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

6. Other settings:

   Show on mouse over:
   Choose „Yes“ to show the menu on mouse over.
   Note: This option has not effect for mobile devices.

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

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

9. Scroll position offset [px]:

   You can set an offset to the scrolling destination to correct the final position [px]. Negative values are allowed.

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

11. Animation duration [ms]:

    Set the time for the animation in milliseconds (default: 600). Less ms for a faster effect.

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

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

14. Multiinstance Mode:

    Allow use more then 1 sticky navigator at same page.
    Default is 'No'. Set to 'Yes' only if is necessary.

Common controls

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

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

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

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

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

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

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

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

Like it?

Sticky Navigator Module tutorial

Tutorial Version 1.0.1

Sticky Navigator Version 1.0.1

Introduction

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.

Main Features:

• Extremly customizable
• No programming skills required
• Predefined themes.
• Over 20 predifined scroll effects
• don't limit yourself to pixels, use the units you prefer! : px, em, ex, %, in, cm, mm, pt and pc  initial, medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger (with life validator)
• Creates items from the system menu ( ideal for onepage sites )
• Creates items using predefined selectors like h2, h3, h4, sections.
• Creates items from a custom css selector. ( ideal to automatically create an index of a long content page or blogs ).
  For example for K2 content: '.k2-item h3' to match all ‚h3' inside the k2Container.
• More than 1000 symbols! Unicode / Font Awesome / Google Icons or your own images
• Optimize text legibility
• Customize width, margins, padding, colors, opacity, border style, border radius, shadows, text and font styles and much more.
• Individually for normal or active/hover state.
• Responsive functionalityt
• Add customs css in backend without modifiying any file.
• Individual customization for normal and hover states.
• Use confortable common controls to modify:
  Positions, margins, padding,
  color and opacity (using color picker for rgb, rgba and hex format),
  symbols (Unicode / Font Awesome / Google / jpg, png ),
  font and text styles.
  Optimize legibility
  
  Take a look at the manual to discover much more!

Installation

1. General:

   This section describes the main points to install the Sticky Navigator Module.

   We strongly recommend you to read the following documentation:
   Installing extensions: https://docs.joomla.org/Installing_an_extension/en.

   Module Manager.: https://docs.joomla.org/Help38:Extensions_Module_Manager.

2. Startup:

   Download Sticky Navigator from our Website www.w3smart-tools.com.

3. Create a new Module:

   

    

4. Select the mod_sticky_navigator Module Type
   

   

5. Set the Title and the Template Position

Module

1. Overview - Module Panel:

   

2. Set the Download ID

   The Download ID enable this extension to get Updates during the Sticky Navigator subscription is active.
   Joomla will inform you when a newer Version is ready to install.
   You will find your Download ID under following Link: https://w3smart-tools.com/account/my-downloads-ids.
   Copy your Download ID and paste it in to this field.
   
   

3. Select the Sticky Navigator Source

   
   Following types are available:
   From System Menu:
   Get the Menu items from the Joomla system menu.
   Note: Must include an „#“ symbol corresponding to the pageID.
   For example: Matching the section id service.
   
   
   
   Choose h1, h2, h3 or h4: 
   To match the respective heading items in the whole document.
   
   Choose section:
   To match sections. Ideal to use in onepage sites.
   
   Alternatively choose 'Custom CSS Selector':
   To specify your own custom selector ( see below in the 'Custom Selector' field ).
   
   
   
   In this case you will able to set a custom selector:
   Specify a CSS selector:
   This will generate menu items for all matching elements. Example for joomla content: '.item-page h3’ to match all 'h3' elements inside the joomla content. Example for K2 content: '.k2-item h3' to match all ‚h3' in 'div#k2Container div.itemContainer’.
   Note: Sticky Navigator will get the text from the corresponding text content.

4. Enable / Disable

   Java Script and jQuery:
   Here you can disable java script to discard any conflict with other extensions.
   TIP: Disable java script while you customize the Sticky Menu. This will stay always on the top.
   Enable jQuery framework:
   This extension needs the jQuery framework which is already enabled in Joomla by default.

Theme and Basic Settings

1. Overview - Theme and basic Settings  
   

2. Select a css theme
   Select the base .css file. This file defines the style and position of the Sticky Navigator Module. In the entire Module you will always be able to maintain the values as in the original file or overwrite it. Use modify „no“ or "ignore" to leave the original values.

3. Use only css file:

   If is set to „yes“, you will only be able to change text and symbol orientation. All other styling options will be ignored and the module will work only according to the .css file.

4. Text and symbol orientation:

   Symbol right: The text is at the left and the symbols at the right.
   Symbol left: The text is at the right and the symbols at the left.

5. Attach custom css:

   Here you have the possibility to add additional css properties.

6. Note: How to copy / modify themes in the .css files?

   All themes are saved on YourSite/media/mod_sticky_navigator/css/. The original files have the „w3st-“ prefix. The default theme is w3st-default.css Please do not modify the original themes because they may be overwritten by the next update. You can copy and modify any theme. Please do not use the „w3st-„ prefix as a theme name. If you like to modify some properties in your frontend theme you may use the !important option to get it work.

Style and Position

1. Frontend diagram

   
   

2. Overview - Navigator Style and Position Panel

     
   
   

3. Overview - Navigator Style and Position panel with all open dialogs.

   
   

4. Modify Menu position, width and style:
   • Choose „No“ to disable the whole panel.
   • Choose „Yes“ will enable the panel for modifications.

    

5. Use the Position control to set the Menu Position:
   
   
6. Menu width:

   Sets the width of the menu:
   Default is ‚auto‘. If it is set to ‚auto‘ the menu will get the width from the child elements.
   Allowed units are: 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.

7. Background color ( eq. to css background-color ):

   Sets the background color of the menu. See common control color to set it.

8. Border Style ( eq. to css border-style):

   Predefined values: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
   Mode ignore: Will not change the border property.

9. Border color ( eq. to css border-color):

   Sets the background color of the menu. See common control color to set it.

10. Border radius ( eq. to css border-radius):

    See common control radius to set it.

     

Spacer

The spacer represents the space between two Menu Items.

1. Frontend diagram
   
   

   
   

2. Overview - Spacer Settings Panel

   
   

3. Spacer Detail:

   Displays spacer: With this option you can hide the spacer directly. This overwrites the settings below.

4. Modify Spacer:

   Activates the options to modify the Spacer

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

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

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

8. Spacer Style:

   Predefined values: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
   Mode ignore: Will not change the border property.

9. Border color ( eq. to css border-color):

   Sets the background color of the menu. See common control color to set it.

Text/Symbols

1. Frontend diagram
   
2. Overview - Spacer Settings Panel closed options
   
   
   
3. Overview - Spacer Settings Panel opened options
   
   
4. 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.

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

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

7. 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: 
   
   
8. Modify Normal Text:

   Activate the options to modify the Normal Text. 

9. Font Style:

   Modify the Font and Text Style for the Normal State.
   See „Common controls -> Font Style control“.

10. Set Color:

    Set the Font color for the Normal State.
    See „Common controls -> Font Style control“.

11. Modify Shadow:

    Set the Text shadow for the Normal State.
    See „Common controls -> Shadow control“.

12. 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:
    
13. Display Symbols:

    Choose „hide“ to hide the symbols.

14. Modify Symbols:

    Choose „yes“ to enable the Symbols dialog.
    
    

     Symbols Normal Setting: 
    
15. Set the Symbols size:

    ( see Common Controls - Font Style control - Font Size ).

16. Set color:

    Set the Symbol color ( see Common Controls - Color control ).

17. Set Symbol:

    sSet the Symbol ( see Common Controls - Symbols control ).

18. Set Margin:

    Set Symbol Margin ( see Common Controls - Margin control ).

     Symbols Hover Setting: 
    
19. Symbols Hover Setting:

    Same as above „Symbols Normal Setting“ but for active / hover Symbols.

Hide/Show Buttons

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

2. Frontend diagram
3. Overview - Hide / Show Buttons Panel:

   

    General Settings: 
   
4. Use Hide / Show Buttons:

   Choose „Yes“ to use and enable the usage of the Hide / Show Buttons.

   
   
5. 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: 
   
6. Set Position:

   Set the Position ( see Position control ) of the Hide Button.
   The position reference is the Sticky Menu.

7. Set Symbol:

   Set the Symbol ( see Common Controls - Symbols control ).

8. Set color:

   Set the Symbol color ( see Common Controls - Color control ).

9. 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: 
   
10. Set Position:

    Set the Position ( see Position control ) of the Hide Button.
    The position reference is the hole screen.

11. Set Symbol:

    Set the Symbol ( see Common Controls - Symbols control ).

12. Set color:

    Set the Symbol color ( see Common Controls - Color control ).

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

Behaviour and effects

1. Overview - Behaviour and effects
   
   
    Responsive settings: 
2. Maximum Items:

   Set the maximum of Menu Items.

3. Responsive width [px]:

   If the Window width is less then this value, the module will work in responsive mode.

4. Responsive class name:

   This class will be added to the module container ( only if the module is in responsive mode ).

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

6. Other settings:

   Show on mouse over:
   Choose „Yes“ to show the menu on mouse over.
   Note: This option has not effect for mobile devices.

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

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

9. Scroll position offset [px]:

   You can set an offset to the scrolling destination to correct the final position [px]. Negative values are allowed.

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

11. Animation duration [ms]:

    Set the time for the animation in milliseconds (default: 600). Less ms for a faster effect.

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

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

14. Multiinstance Mode:

    Allow use more then 1 sticky navigator at same page.
    Default is 'No'. Set to 'Yes' only if is necessary.

Common controls

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

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

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

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

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

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

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

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

Like it?