Navbar

The Navbar is a fixed area that contains a logo, a brand, icons, and/or menu items.

Double-click on the Widget, as seen above, to access its Advanced Property Settings:

IMPORTANT

In Design mode, the Navbar includes areas where widgets can be dropped. One “drop area” is located on the left. Another “drop area” is located on the right. You can drop any widget in these two areas (Generally icons or text are used in the Navbar area.)

Properties

• Text Style. Depending on the menu background color, you can choose to display the menu items with a light or dark color. (Eg. For a black Navbar, you will have to choose Light Color.)
  

• Position
  

  • 1. default: The Navbar is displayed wherever you drop it on the page.

  • 2. fixed top: The Navbar is placed at the top of the screen.

  • 3. fixed bottom: The Navbar is placed at the bottom of the screen.

• Breakpoint. The Breakpoint is used when viewing on different sized devices, as the screen reduces in size, a “Hamburger” icon is automatically displayed.
  

  The Hamburger icon is displayed with a submenu. By Choosing the Breakpoint, you can define when the Navbar Menu will transform itself in a "Hamburger" menu.
  

• Menu Spacer. Use that option when the Navbar is displayed at a fixed Top Position. If you select the “No Space” option, then the menu will be displayed on top of the Widget just below itself. It is useful for instance if you want to display a transparent menu on top of a carousel.  
  

• Scroll Effect. When the user scrolls the page, the Scroll Effect sets the Navbar to either disappear or to popup on the screen. The most common option seen is a “fixed to top” Navbar that disappears as the user scrolls down the page.
  

• Brand Text. An optional main brand for the Navbar.
  

• Brand Image. The optional main brand image for the Navbar:
  

  Note

  For Displaying a logo in a custom size, you can also add an Image widget to the Navbar in the Left Drop Area:
  

  

Advanced Properties Window - Menu Items Tab

• Items List. Use + and - buttons to add or remove Menu items on the Navbar.
  

• Menu Item Type. A dropdown box that allows you to choose the type of menu that you would like displayed.
  There are two options offered for the Menu Item Type:
  

  • 1. Text: the menu item will be displayed on the Navbar in text.

  • 2. Dropdown: when the menu is clicked, it will dropdown a list of menu items.

• Label. The displayed title of the menu item.
  

• Action. When the item is clicked or touched, an Action is triggered. See the " Actions " page for more information on the actions associated with the components.