The header

Here's a basic HTML example for a header showing a title and a hamburger icon. Note that all IDs in this example are arbitrary, the classnames most certainly are not.

<div id="my-header" class="mh-head Sticky">
   <span class="mh-btns-left">
      <a class="fa fa-bars" href="#my-menu"></a>
   </span>
   <span class="mh-text">demo</span>
</div>

HTML explanation

.mh-head
The header itself.
.Sticky
Adding this classname tells the jQuery.mmenu fixedElements add-on the header has position: sticky; and should be treated as such.
.mh-btns-left
A wrapper for buttons on the left.
.fa.fa-bars
A Font Awesome hamburger icon.
.mh-text
The header text.

For a complete overview of all HTML nodes and classnames, check out the documentation.

Secondairy content

For secondairy navigation content, you can simply add the classname mh-size-2 and add a .mh-list, .mh-form, .mh-image or .mh-logo to the header.

<div id="my-header" class="mh-head mh-size-2 Sticky">
   <span class="mh-btns-left">
      <a class="fa fa-bars" href="#menu"></a>
   </span>
   <span class="mh-text">demo</span>
   <form class="mh-form">
      <input placeholder="search" />
      <a href="#" class="fa fa-search"></a>
   </form>
</div>

Or, for a really cool scrolling effect, add a second header and set only one of the two to be "sticky".

<div id="my-header-1" class="mh-head Sticky">
   <span class="mh-btns-left">
      <a class="fa fa-bars" href="#menu"></a>
   </span>
   <span class="mh-text">demo</span>
</div>
<div id="my-header-2" class="mh-head">
   <form class="mh-form">
      <input placeholder="search" />
      <a href="#" class="fa fa-search"></a>
   </form>
</div>

More than two headers should probably work, but is not recommended.

Next up:
Fire the plugin