Menubar Holder

The purpose of the Menubar Holder element is to serve as a container for either a Menubar element or a Menubar Collapsible element that contains the Menubar element within it.

It's important to note that the Menubar Holder element cannot be directly found in the Page Element Library for drag and drop functionality. Instead, you can utilize the pre-designed responsive solutions offered by the Menubar Style1 and Menubar Style2 elements, which already include the Menubar Holder functionality. By using these elements, you can easily incorporate the Menubar Holder and its associated components into your web page.

The Menubar Holder element allows you to control:

• The text color (light or dark) of the Menubar Item elements inside the Menubar (see the Options section below).

• The background color by using the Custom CSS Classes setting or the Design Tab.

• The screen-sizes for which the menu will be shown by specifying one of the following classes in the Custom CSS Classes setting:

  • navbar-expand-lg

    The menu is shown horizontally expanded for screen widths 992px or greater.

  • navbar-expand-md

    The menu is shown horizontally expanded for screen widths 768px or greater.

  • navbar-expand-sm

    The menu is shown horizontally expanded for screen widths 576px or greater.

---

Options

The Options tab settings for this element are described below:

Background Style

This setting allows you to specify the general color scheme you intend to use for your menubar.

• Default

  Does not change the text color attributes of the contained menu items.

• Light

  Renders the contained menu items in a dark text color. The menu items marked with the Activated Look setting are shown in a more distinctly dark text color.

• Dark

  Renders the contained menu items in a light text color. The menu items marked with the Activated Look setting are shown in a more distinctly light text color.

NOTE: You would still need to set the actual back-ground color of the menu bar using one of the following:

• Use your own CSS class in the Custom CSS Classes setting for this element.

• Choose the background color in the Design Tab for this element.