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.


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

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

Leave a Reply

You must be logged in to post a comment.

JoomLead Gantry 5 particles 2.2.0 released, new features and bug fixes Changelog
Cyber Monday is finally here! Save 30% OFF everything. Use promo code: 30OFFCM Shop Now