JL Navbar Particle

  • Tony
  • 8 November 2020
  • No comments
  • Docs
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 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 menu type displayed in the mobile position.
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


Leave a Reply

You must be logged in to post a comment.

Gantry5 particles 2.1.6 released, Joomla! 4 support and more Changelog
HAPPY NEW YEAR - Save 40% Off Everything! Discount code: NEWYEAR2021 Shop Now