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 Gantry5 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.
Gantry5 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
Implemented for the next JoomLead templates upgrade (Joomla 4), here some screenshots:
Settings
Manage Navbar settings, customize styles and header layouts.
Logo Tab
| Settings | Description |
|---|---|
| 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 |
| 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. |
| Background Color | Customize the background color for offcanvas bar. |
| 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. |
| Show dividers | Show dividers between menu items. |
| 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. |
| 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 Simple and Extended style. The Simple Menu style inherits from the theme menu style while Extended style inherit from Uikit navbar style. Note: The Simple Menu (default 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. Note: |
| Background | Customize the navbar background color. |
| Headerbar Top | Customize the Headerbar top background color(Support Stacked Header Layout only). |
| Logo text color | Customize the logo text color. |
| Mobile text 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. |
| Divider Color | Customize the divider color. |
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 | 11 prepared 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. |
General Tab
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 simple 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
Comments