Navbar Pro

Navbar Pro

Show a navigation bar that can be used for your site navigation. Use this component to position a navigation bar independently of the template.

Basics Settings

Define a name to easily identify this element inside the Theme-Builder.
Choose a Menu
Choose a Joomla menu from the list below.
Choose a Base Link
Choose a Base Link from the list below.
Define one or more class names for the element. Separate multiple classes with spaces.
ID Selector for the element.

Style Settings

Addon Padding
Choose a padding for the component.
Menu Layout
Choose a layout. (Layouts: Navbar, Nav, Subnav)
Boundary alignment
Yes or No. You can also align the drop to its boundary. (Layout: Navbar)
Set Boundary alignment
Set the position of the drop. (Layout: Navbar)
Multiple columns
The Dropdown component allows you arrange the dropdown content in columns. (Layout: Navbar)
Set columns width in px
Use this setting to prevent line breaks in the columns. (Layout: Navbar)
Nav modifier
Choose a style modifier for the nav. (Layout: Nav)
Use Dropbar?
Yes or No. A dropbar extends to the full width of the navbar and displays the dropdown without its default styling. (Layout: Navbar)
Dropbar Push?
By default, the dropbar overlays the site content. Choose Yes, to push the content down instead. (Layout: Navbar)
Use Offcanvas?
Create an off-canvas sidebar that slides in and out of the page, which is perfect for creating mobile navigations. (Layout: Navbar, Nav)
Flip Offcanvas?
Choose Yes to adjust the off-canvas its alignment, so that it slides in from the right.
Offcanvas Overlay?
Display the off-canvas together with an overlay.
Offcanvas Animation modes
By default, the off-canvas slides in. But you can actually choose between different animation modes for the off-canvas entrance.

Animation Settings

Scrollspy Animation
The Scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears in the viewport for the first time, you can trigger a smooth animation to fade in the element.