• Joomla
• WordPress
• Grav

• # JL Navbar Joomla Package contents

  Files	Description
  jlnavbar.yaml	Contains the Navbar particle settings.
  jlnavbar.html.twig	The Twig file to pull information, settings.
  jlnavcanvas.html.twig	The Twig file to pull the Off-canvas information, settings on mobile/tablet devices.

• # JL Navbar WordPress Package contents

  Files	Description
  jlnavbar.yaml	Contains the Navbar particle settings.
  jlnavbar.html.twig	The Twig file to pull information, settings.
  jlnavcanvas.html.twig	The Twig file to pull the Off-canvas information, settings on mobile/tablet devices.

• # JL Navbar Grav Package contents

  Files	Description
  jlnavbar.yaml	Contains the Navbar particle settings.
  jlnavbar.html.twig	The Twig file to pull information, settings.
  jlnavcanvas.html.twig	The Twig file to pull the Off-canvas information, settings on mobile/tablet devices.

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

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

Menu Tab

Mobile Tab

Style Tab

Header Tab

Toggle style and Off-canvas style is available if you use Toggle Header Layout type(Toggle Offcanvas, Toggle Modal)

General Tab

Section ID

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

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings