Menus

Inserting Menu

Menus can be displayed and styled in a variety of fashions and colors.

Step 1: Switch To Backend Editor

To insert a menu, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:

VC Editor Backend
Step 2: Select Tabs (Horizontal or Vertical)

Click "Menu" in the Visual Composer Modal to insert a menu, for example:

Menu
Step 3: Edit Tab Settings

Once the menu element has been inserted click the Edit Link(pen icon) of the menu wrapper, for example:

Menu Settings

Here is an overview of available menu options:

  • Menu Title

    Enter a Menu title.

  • Attach Image

    Choose where the image should be loaded from.

  • Upload Image

    Choose image to upload.

  • Menu Column Width

    Determines the menu list column width.

  • Menu Column Offset

    Determines the menu list column offset. Refer to Rows & Columns > Column Alignment > Understanding Column Offset for detailed examples of column offsets.

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

  • Display Menu Items Inline

    Determines whether menu items should be displayed inline. This will force menut titles, price and descriptions onto the same line.

  • Menu Border Style

    Determines whether the menu should have rounded cornders.

  • Menu Title Alignment

    Determines the menu title alignment, either Left, Center or Right.

  • Menu Item Alignment

    Determines the menu item alignment, either Left, Center or Right.

  • Show Menu Item Line

    Determines the menu items should have an underline, either None, Solid, Dotted or Dashed.

  • Menu Box Size

    Set the menu box size to either small, medium, large, extra large, or custom. Determined by content padding.

  • Box Top/Bottom Padding

    Sets the top/bottom padding of the box. Note: this option is dependent upon that Size is set to Custom.

  • Box Left/Right Padding

    Sets the left/right padding of the box. Note: this option is dependent upon that Size is set to Custom.

  • Color Options

    Menu Background Color
    Menu Border Color
    Menu Title Color
    Menu Item Title Color
    Menu Item Description Color
    Menu Item Line Color
    Overlay Color

Step 4: Add Content

Once you have edited the menu settings, click the Edit Link(pen icon) of the menu panel you wish to edit, for example:

Menu Add Content

Here is an overview of available panel content options:

  • Menu Item Title

    Enter menu item title

  • Menu Item Description

    Enter menu item description.

  • Menu Item Price

    Set a menu item price.

  • Show Price

    Determines whether the menu item price will be shown or hidden.

Can't find what you're looking for? Submit a request in our forum.