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
- Label
- 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.
- 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.
- 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.