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 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.
Multiple columns
The Dropdown component allows you arrange the dropdown content in columns.
Set columns width in px
Use this setting to prevent line breaks in the columns.
Use Dropbar?
Yes or No. A dropbar extends to the full width of the navbar and displays the dropdown without its default styling.
Dropbar Push?
By default, the dropbar overlays the site content. Choose Yes, to push the content down instead.
Use Offcanvas?
Create an off-canvas sidebar that slides in and out of the page, which is perfect for creating mobile navigations.
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.