JL Navbar Particle
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.
Usage
Step 1 Go to Template/Theme Settings > select the Layout to add Navbar particle (i.e: Choose Base Outline if you want to use the Navbar particle for the whole layout or Home if you want to use the Navbar for homepage only) -> Layout tab -> Drag and drop the JL Navbar Particle from Particles panel (left corner) to the section you want to display the particle.
Step 2 Remove the Section layout container and unset the margin/padding for the content within the section.
We need to remove the section layout container so we can use the Max Width option which described here, remove the default padding/margin to ensure the same horizontal padding (left/right) across all sections.
Custom method
If your theme/template does not support section variations, you can use custom css classes by adding Gantry 5 core CSS Classes name: nomarginall nopaddingall
Open section settings by clicking the section icon settings
Add nomarginall nopaddingall css classe names into CSS Classes textbox. Hit Apply and Save
Section variations method
If your theme/template support section variations, you can choose the No Margin All and No Padding All from the selection list.
Click Apply and Save button.
Step 3 Remove the default mobile canvas.
Gantry 5 based theme using Mobile Menu particle to handle the Menu canvas on mobile devices which assigned to the Offcanvas Section by default. This Particle is the container target where, on Mobile, the Menu will be injected.
You can remove this particle to avoid the menu conflict on mobile if any, the Navbar particle already supports three Mobile menu styles including OffCanvas, Modal and Dropdown.
Preview
Mega menu
Mobile/Tablet
Included for the next JoomLead templates upgrade (Joomla 4) by default, here some screenshots:
Settings
Manage Navbar settings, customize styles and header layouts.
Logo Tab
| Settings | Description |
|---|---|
| Url | Custom Url for the logo. Leave empty to go to home page. |
| Logo Text | Type in the Logo Text that will be used in case no Logo Image from your media library has been picked. |
| Logo Image | Upload your logo in the png, jpg or SVG file format for best quality on all screens. |
| Svg Support | Inject inline SVG images into the page markup and style them with CSS. Use this option if you use svg format. |
| Maximum Height | Set the logo height |
| Mobile Logo (Optional) | Select an alternative logo, which will be used on small devices. |
| Mobile Max Height | Set the Mobile logo height. |
Menu Tab
| 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. |
| Expand on Hover | Allows to enable / disable the ability to expand menu items by hover or click only |
| Enable Parent Icon | Allows to enable / disable the parent Icon that included subnav items |
| 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. |
Mobile Tab
| Settings | Description |
|---|---|
| Breakpoint | Select the device size that will replace the default header with the mobile header. |
| Sticky | Common settings for Sticky animation. |
| Sticky | Let the navbar stick at the top of the viewport while scrolling or only when scrolling up. |
| Top | The top offset from where the element should be stick. |
| Offset | The offset the Sticky should be fixed to. |
| Logo alignment | Select the alignment of the logo on mobile/tablet mode. |
| Menu Toggle | Select the alignment of the menu toggle icon. |
| 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 (Off-canvas, Modal, Dropdown). |
| Show Close Icon | Use this option to create a close button and enable its functionality. |
| Inverse color | Set light or dark color mode for nav icon, buttons and controls. |
| 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. |
| Dropdown | Choose Slide or Push animation for mobile dropdown |
| Dropdown animation | Toggle dropdown animation on mobile. |
| Nav Settings | Common settings for Nav |
| Menu Style | Choose the Menu Style. |
| Show dividers | Show dividers between menu items. |
| Center horizontally | Center the menu and the content horizontally. |
| Center vertically | Center the menu and the content vertically. |
| Background | Customize the background color. |
| 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. |
| Dialog module position | Add custom Joomla Module or WordPress widget to the Mobile header navbar |
| Module Id | Pick a Joomla module (Joomla version only) |
| Chrome | Module Chrome |
| Custom html | Enter the custom html content. |
| Process Twig | Enable Twig template processing in the content. Twig will be processed before shortcodes. |
| Process shortcodes | Enable shortcode processing / filtering in the content. |
| Header Mobile | Add position to header mobile layout |
| Module Id | Pick a Joomla module (Joomla version only) |
| Chrome | Module Chrome |
| Custom html | Enter the custom html content. |
| Process Twig | Enable Twig template processing in the content. Twig will be processed before shortcodes. |
| Process shortcodes | Enable shortcode processing / filtering in the content. |
Style Tab
| Settings | Description |
|---|---|
| Navbar | Common settings for Navbar style (new from 1.0.3). |
| Navbar Style | Select the menu Navbar style. You can choose between Default and Extended style. The Default Menu style inherits from the theme menu style while Extended style inherit from Uikit navbar style. Note: The Default Menu (default theme menu style) is not supported by all Nav customize styles and may have no visible effect. |
| Transparent | Make the header transparent and overlay the page background. |
| Background | Customize the navbar background color. |
| Headerbar Top | Customize the Headerbar top background color(Support Stacked Header Layout only). |
| Logo color | Customize the logo text color. |
| Mobile color | Customize the mobile logo text color. |
| Nav Item | Common settings for Nav Item |
| Color | Customize the nav item color. |
| Font Size | Customize the nav item font size in rem, em, px. |
| Transform | The following options will transform text into uppercased, capitalized or lowercased characters. |
| Hover Color | Customize the Nav item hover color. |
| Active Color | Customize the Nav item active color. |
| Dropdown Settings | Common settings for Dropdown |
| Background | Customize the Dropdown background color. |
| Border radius | Customize the Dropdown border radius in rem, em, px. |
| Color | Customize the Dropdown text color. |
| Padding | Customize the nav item font size in rem, em, px. |
| Z-index | Customize the dropdown z-index value if the dropdown is overlaps by section z-index. |
| Offset | To define a custom offset between the dropdown and its parent item, add the offset option with a value in pixels. |
| Alignment | Align the dropdown style to the left/center/right |
| Animation | Apply animations to the dropdown (included 14 dropdown animations). |
| Stretch | Stretch dropdown on x axis. |
| Dropdown Nav Item | Common settings for Dropdown |
| Style | Select the style for dropdown Nav |
| Show dividers | Add dividers for nav items |
| Divider Color | Customize the divider color for nav items. |
| Color | Customize the nav item color. |
| Font size | Customize the nav item font size in rem, em, px. |
| Padding | Customize the nav item padding. |
| Transform | The following options will transform text into uppercased, capitalized or lowercased characters. |
| Hover color | Customize the Nav item hover color. |
| Active color | Customize the Nav item active color. |
| Hover background | Customize the Nav item hover/active background color for secondary style. |
Header Tab
Toggle style and Off-canvas style is available if you use Toggle Header Layout type(Toggle Offcanvas, Toggle Modal)
| Settings | Description |
|---|---|
| Header Layout | 13 pre-defined header layouts. |
| Sticky | Common settings for Sticky animation. |
| Sticky | Let the navbar stick at the top of the viewport while scrolling or only when scrolling up. |
| Top | The top offset from where the element should be stick. |
| Offset | The offset the Sticky should be fixed to. |
| Toggle Menu Style | Common settings for Offcanvas and Modal. |
| Menu Style | Select the style for menu. |
| Center horizontally | Select the text alignment for the menu in the offcanvas bar or modal window. |
| Center vertically | Center vertically the menu. |
| Larger close icon | Show larger close icon |
| Offcanvas Style | Common settings for Offcanvas toggle. |
| Overlay | Use this option to add an overlay, blanking out the page. |
| Animation modes | Choose between Slide, Reveal and Push offcanvas animations. |
| Social Icons | You can add and choose to display the social icons in the navbar, header positions. |
| Search | You can add and choose to display the search form in the navbar, header positions. |
| Custom Html | You can add custom html and choose to display the content in the navbar, header positions. |
Dialog Tab
Setting the Dialog layout to display menus, modules, social icons, search form. Header Layout type like Toggle Offcanvas and Toggle Modal are not supported.
Dropbar mode
Modal mode
Offcanvas mode
| Settings | Description |
|---|---|
| Dialog Layout | Display the dialog in a dropbar, offcanvas sidebar or modal window. |
| Toggle Position | Select the dialog position that will display the dialog. |
| Dialog Canvas Layout | Common settings for Offcanvas mode. |
| Larger close button | Show large close button for Offcanvas |
| Overlay | Use this option to add an overlay, blanking out the page. |
| Animation modes | Choose between Slide, Reveal and Push offcanvas animations. |
| Dialog Modal Layout | Common settings for Modal mode. |
| Modal Width | Set the content width. |
| Dialog Dropbar Layout | Common settings for Dropbar toggle. |
| Dropbar Animation | Select the animation on how the dropbar appears below the navbar. |
| Dropbar Content Width | Set the width of the dropbar content. |
| Common Options | Common settings for the Dialog layout. |
| Pick a Module | This feature support Joomla only. |
| Key | Position name. |
| Chrome | Module chrome in this position. |
| Menu Style | Choose the Nav menu style on Offcanvas, Dropbar or Modal mode. |
| Center horizontally | Center the elements horizontally |
| Center vertically | Center the elements vertically. |
| Show search form | Show the Joomla/Wordpress/Grav search form. |
| Show social icons | Show social icons which added via the Header tab |
| Custom HTML | Enter custom HTML makeup. You can load a special Joomla module using the syntax like {loadmoduleid MODULE_ID}. This is a similar concept like adding a module inside an article. |
| Process Twig | Enable Twig template processing in the Custom HTML. |
| Process shortcodes | Enable shortcode processing / filtering in the content. |
| Text | Show the menu text next to the icon |
General Tab
Gantry 5 Mobile Menu
By default, the Navbar particle has it’s own Offcanvas, Modal or Dropdown style to present the menu on mobile devices. However, if you want to use the default Gantry 5 mobile menu, you can do by following:
1. Tab style, select the Default menu style for the Navbar Style, the Extended style is not supported in this case.
2. Tab Header, enable the Gantry Mobile Menu feature.
3. Ensure the Mobile Menu particle positioned in the Offcanvas Section
4. Increase the Breakpoints for Mobile Menu, i.e: 60rem
Here the demo with default Hydrogen theme
Section ID
Using Section ID method if:
- – Your theme using custom horizontal padding (keeping a small padding to the left and right).
- – You want to ensure the same horizontal padding (left/right) across all sections.
- – You want to use Sticky animation for the section widh custom horizontal padding.
Some themes using custom css class or variations name, i.e: section horizontal paddings to add a horizontal padding which adjusts to the viewport width for the content within the section. In this case, if you use the default sticky option, it will cause the section width issue when sticky animation is initialized.
To fix the issue, just define the section ID as a selector for Sticky animation. i.e: #g-navigation
| Settings | Description |
|---|---|
| Header Layout | 11 prepared header layouts. |
| Container | Common settings for Container width. |
Max Width |
Set the maximum width for the content within the section. Choose between the Default, Small, Large and X-Large to set a fixed max width. The Expand option expands the content to the full width of the section keeping a small padding to the left and right while the None option has no padding at all. You should choose the None option if you section using special horizontal padding css, i.e: section horizontal paddings, by this way the fixed width is inherited from the section itself and you can ensure the same horizontal padding across all sections. |
| Custom | Add custom width for the container width. |
| Header height. | Common settings for header height. |
| Header Height | Define navbar item height. |
| Remove Nav Margin | Remove the theme custom nav margin (Hydrogen) if you use Default menu style.. |
| Stacked Headers padding and margin layout. | Set the padding and margin for headerbar if you use Stacked Header Layout. |
General, Parallax and Parallax Background tab
Please take a look the documentation here for more detail about these tabs settings
Case Scenario:
You want the Navbar to be sticky on up (on all devices – important), but require the container to remain in place so that width of the navigation remains consistent down the page:
1) Place the JL Navbar in the Navigation section as usual
2) Do not apply any ‘sticky’ settings inside the JL NavBar Particle itself
3) Apply Extended menu setting
4) Set Container Max Width:None
4) Apply the following tag Attribute to the Navigation Section (not the Block)
Tag Attributes: jl-sticky -> show-on-up: true; animation: jl-animation-slide-top;
Bingo! Applied consistently to all devices, remember to set your required background colours in the Style tab of the Navbar Particle