Customize/Setup Custom Content

Head over Appearance/Menus in WordPress Admin Panel. On that page you can see tiny orange Superfly buttons on Menu items. Click it.

In popup you can add your custom HTML. Style it with CSS that you can add inline in HTML field you inside STYLE tags. Alternatively add CSS under Advanced tab on plugin settings page.

So, let's see for example how to setup contact form and panel with item description like on Superfly demo.

Contact Form

On demo we use shortcode of Contact Form 7 that we inserted in content field

...and following custom CSS added elsewhere as described before.

.sfm-content-wrapper input, .sfm-content-wrapper textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  background: #fff;
  max-width: 432px;
  border: 1px solid #DEDEDE;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  padding: 10px;
  font-weight: 400;
  font-size: 16px;
  color: #6A6865;
  line-height: 19px;
  width: 100%;
}

.sfm-content-wrapper input[type=submit] {
  background: #E34F7D;
  padding: 7px 20px;
  color: #FFF;
  box-sizing: border-box;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  height: 50px;
}

Item description

Here's example HTML we use for item description panel

<img class="sf-banner" style="margin-bottom: 30px" src="http://superfly.looks-awesome.com/wp-content/uploads/2015/11/superfly_banner.png"/>

<h1>Superfly — Responsive WordPress Menu Plugin</h1>

<p>Superfly is a responsive WordPress menu plugin that generates space efficient vertical push/sliding/static navigation, icon toolbar or fullscreen menu on your choice. Superfly makes navigation much easier and user-friendly both on desktops and mobiles. It can be used as always visible navigation as well.</p>

<a href="http://codecanyon.net/item/superfly-responsive-wordpress-menu-plugin/8012790?ref=looks_awesome" class="learn_more">Learn more</a>

and its accompanying CSS is:

.sfm-content-wrapper h1 {
  color: #CC4B72;
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  margin: 0 0 10px 0 !important;
  text-transform: uppercase;
}
.sfm-content-wrapper p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin: 0 0 20px 0 !important;
}
.sfm-content-wrapper .learn_more {
  background: #E34F7D;
  padding: 14px 20px;
  color: #FFF;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  z-index: 2;
}