JL Navbar Particle
Create a navigation bar that can be used for your main site navigation, including Logo, Menu, Search form, Social icons and Offcanvas bar. See Demo Page.
Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.
Requirements Navbar particles require Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.
Go to Template/Theme Settings > select the Layout to add Navbar particle (i.e: Home) -> Layout tab -> Drag and drop the JL Navbar Particle from Particles panel (left corner) to the section you want to display the particle.
Settings
| Settings | Description |
|---|---|
| Menu | Select menu to be used with the particle. |
| Base Item | Select a menu item to always be used as the base for the menu display. |
| Start Level | Set the start level of the menu. |
| Max Levels | Set the maximum number of menu levels to display. |
| Render Titles | Renders the titles/tooltips of the Menu Items for accessibility. |
| Menu Visibility | Display the main menu only on this device width and larger. |
| Dropdown Align | Select the dropdown’s alignment to the menu item or the navbar. |
| Align to navbar | Align to navbar instead of the menu item. |
| Expand on Hover | Allows to enable / disable the ability to expand menu items by hover or click only |
| Animation | Apply an animation to particles once they enter the viewport. This will animate all particles inside the section. |
| Force Target Attribute | Adds target="_self" attribute to all menu links instead of omitting the default value. Fixes an issue with pinned tabs in Firefox where external links always open in a new tab. |
| Section ID | Define the ID or class of the section that you want to set as fixed. |
| Disable Section Color | By default, Gantry themes added their section color for typography and link via SCSS, you can use this option to remove the section color and use the Navbar color customization. |
| Sticky | Common settings for Sticky animation. |
| Sticky | Let the navbar stick at the top of the viewport while scrolling or only when scrolling up. |
| Media | Select the device size for sticky. |
| Top | The top offset from where the element should be stick. |
| Offset | The offset the Sticky should be fixed to. |
| CSS Classes | CSS class name for the particle. |
Off-canvas Tab
| Settings | Description |
|---|---|
| Toggle | Common settings for Toggle text. |
| Text | Show the text label Menu next to the hamburger icon. |
| Color | Customize the toggle color. |
| Hover Color | Customize the toggle color on hover. |
| Font Size | Customize the toggle text font size. |
| Animation | Select the animation type displayed on click. |
| Type | Select the Offcanvas or Modal for navigation on click. |
| Show Close Icon | Use this option to create a close button and enable its functionality. |
| Off-canvas | Common settings for Offcanvas animation. |
| Overlay | Use this option to add an overlay, blanking out the page, |
| Animation modes | Choose between Slide, Reveal and Push offcanvas animations. |
| Display on the right | Use this option to display the offcanvas bar on the right. |
| Menu Toggle Height | Set the height of a Menu Toggle. |
| Background Color | Customize the background color for offcanvas bar. |
| Inverse Color | Set light or dark color mode for nav icon, buttons and controls. |
| Modal | Use the modal animation to display the menu in a modal. |
| Center vertically | Center the menu and the content vertically. |
| Nav Settings | Common settings for Nav |
| Menu Style | Choose the Menu Style. |
| Center horizontally | Center the menu and the content horizontally. |
| Nav Color | Customize the nav item color if needed. |
| Active Color | Customize the nav item hover/active color if needed. |
| Nav Header Color | Customize the Nav Header Color. |
| Key | Position name. |
| Module Id | Pick a Joomla module or WordPress Widget |
| Chrome | Module Chrome |
General, Parallax and Parallax Background tab
Please take a look the documentation here for more detail about these tabs settings
Comments