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

Date Publishing Settings
Set the Start Publishing and Finish Publishing dates. This will cause the ui/Theme-Builder component to only be published for the specified time period. If you use both the Start Publishing and the Finish Publishing, the ui/Theme-Builder component will show up only between the beginning date and the ending date.
Start Publishing
If you only set the Start Publishing and not the Finish Publishing, Joomla! will begin displaying the ui/Theme-Builder component on the beginning publishing date given but it will never stop showing the component.
Finish Publishing
If you only set the Finish Publishing and not the Start Publishing, Joomla! will show the ui/Theme-Builder component as soon as you have turned it on and will stop showing the component once the ending publishing date has been reached.
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, Nav)
This setting applies to all dropdowns in the menu. If you want to specify custom columns for your menu item navigate to joomla menu settings -> select menu item -> link type setting -> Link Title Attribute {col x} (x = number of columns). Possible values 1-5. (Settings)
Set columns width in px
Use this setting to prevent line breaks in the columns. (Layout: Navbar, Nav)
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)
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.