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.
Label
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.
Class
Define one or more class names for the element. Separate multiple classes with spaces.
ID
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)
Navbar Logo
Yes or No. Choose a Image or use a custom image code e.g a svg code. (Layout: Navbar)
Split navigation bar?
Yes or No. You can create a split menu with a centered logo. This option splits all level 1 menu items into 2 separate navbar, left and right. In the middle is the logo. (Layout: Navbar)
Navbar Container
Add the Navbar Container element to give it a max-width to the Navbar. (Layout: Navbar)
Navbar Transparent?
Yes or No. (Layout: Navbar)
Show Parent Icon?
Yes or No. (Layout: Navbar, Nav, Subnav)
Show Tooltips?
Yes or No. (Layout: Navbar, Nav, Subnav)
Tooltip Position
When tooltips are displayed, you can use this setting to change their position. (Layout: Navbar, Nav, Subnav)
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.
Offcanvas Accordion?
By default, child menu items are always visible. To apply an accordion effect, just choose 'yes'.

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.