title: Making a responsive jQuery mobile menu button work on all small screen pages?
body: <p>i'm a beginner using a responsive jQuery mobile menu for my main nav bar. The mobile menu button (three horizontal lines) on the small screen works on the first page loaded, but then reverts to the original navbar (see image below). Is there a way to run the code multiple times so that it runs on each page every time? Thanks for your time!  </p>
  
  <p>The relevant code is below...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function($) {
  
    $.fn.menumaker = function(options) {
        
        var cssmenu = $(this), settings = $.extend({
          title: "Menu",
          format: "dropdown",
          breakpoint: 768,
          sticky: false
        }, options);
  
        return this.each(function() {
          cssmenu.find('li ul').parent().addClass('has-sub');
          if (settings.format != 'select') {
            cssmenu.prepend('&lt;div id="menu-button"&gt;' + settings.title + '&lt;/div&gt;');
            $(this).find("#menu-button").on('click', function(){
              $(this).toggleClass('menu-opened');
              var mainmenu = $(this).next('ul');
              if (mainmenu.hasClass('open')) { 
                mainmenu.hide().removeClass('open');
              }
              else {
                mainmenu.show().addClass('open');
                if (settings.format === "dropdown") {
                  mainmenu.find('ul').show();
                }
              }
            });
  
            multiTg = function() {
              cssmenu.find(".has-sub").prepend('&lt;span class="submenu-button"&gt;&lt;/span&gt;');
              cssmenu.find('.submenu-button').on('click', function() {
                $(this).toggleClass('submenu-opened');
                if ($(this).siblings('ul').hasClass('open')) {
                  $(this).siblings('ul').removeClass('open').hide();
                }
                else {
                  $(this).siblings('ul').addClass('open').show();
                }
              });
            };
  
            if (settings.format === 'multitoggle') multiTg();
            else cssmenu.addClass('dropdown');
          }
  
          else if (settings.format === 'select')
          {
            cssmenu.append('&lt;select style="width: 100%"/&gt;').addClass('select-list');
            var selectList = cssmenu.find('select');
            selectList.append('&lt;option&gt;' + settings.title + '&lt;/option&gt;', {
                                                           "selected": "selected",
                                                           "value": ""});
            cssmenu.find('a').each(function() {
              var element = $(this), indentation = "";
              for (i = 1; i &lt; element.parents('ul').length; i++)
              {
                indentation += '-';
              }
              selectList.append('&lt;option value="' + $(this).attr('href') + '"&gt;' + indentation + element.text() + '&lt;/option');
            });
            selectList.on('change', function() {
              window.location = $(this).find("option:selected").val();
            });
          }
  
          if (settings.sticky === true) cssmenu.css('position', 'fixed');
  
          resizeFix = function() {
            if ($(window).width() &gt; settings.breakpoint) {
              cssmenu.find('ul').show();
              cssmenu.removeClass('small-screen');
              if (settings.format === 'select') {
                cssmenu.find('select').hide();
              }
              else {
                cssmenu.find("#menu-button").removeClass("menu-opened");
              }
            }
  
            if ($(window).width() &lt;= settings.breakpoint &amp;&amp; !cssmenu.hasClass("small-screen")) {
              cssmenu.find('ul').hide().removeClass('open');
              cssmenu.addClass('small-screen');
              if (settings.format === 'select') {
                cssmenu.find('select').show();
              }
            }
          };
          resizeFix();
          return $(window).on('resize', resizeFix);
  
        });
    };
  })(jQuery);
  
  (function($){
  $(document).ready(function(){
  
  $(document).ready(function() {
    $("#cssmenu").menumaker({
      title: "Menu",
      format: "dropdown"
    });
  
    $("#cssmenu a").each(function() {
     var linkTitle = $(this).text();
     $(this).attr('data-title', linkTitle);
    });
  });
  
  });
  })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(http://fonts.googleapis.com/css?family=Raleway);
  
  #cssmenu,
  #cssmenu ul,
  #cssmenu ul li,
  #cssmenu ul li a,
  #cssmenu #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #cssmenu:after,
  #cssmenu &gt; ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  #cssmenu #menu-button {
    display: none;
  }
  #cssmenu {
    width: auto;
    font-family: Raleway, sans-serif;
    line-height: 1;
  }
  #cssmenu &gt; ul {
    background: #e9e9e9;
  }
  #cssmenu &gt; ul &gt; li {
    float: left;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
  }
  #cssmenu.align-center &gt; ul {
    font-size: 0;
    text-align: center;
  }
  #cssmenu.align-center &gt; ul &gt; li {
    display: inline-block;
    float: none;
  }
  #cssmenu.align-right &gt; ul &gt; li {
    float: right;
  }
  #cssmenu &gt; ul &gt; li &gt; a {
    padding: 16px 20px;
    font-size: 14px;
    color: black;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    background: #e9e9e9;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  #cssmenu &gt; ul &gt; li.active &gt; a {
    color: black;
  }
  #cssmenu &gt; ul &gt; li:hover &gt; a,
  #cssmenu &gt; ul &gt; li &gt; a:hover {
    color: #dff2fa;
    -webkit-transform: rotateX(90deg) translateY(-23px);
    -moz-transform: rotateX(90deg) translateY(-23px);
    transform: rotateX(90deg) translateY(-23px);
    -ms-transform: none;
  }
  #cssmenu &gt; ul &gt; li &gt; a::before {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 16px 20px;
    color: #059;
    background: #e9e9e9;
    content: attr(data-title);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -ms-transform: translateY(- -18px);
  }
  #cssmenu &gt; ul &gt; li:hover &gt; a::before,
  #cssmenu &gt; ul &gt; li &gt; a:hover::before {
    background: #e9e9e9;
  }
  #cssmenu.small-screen {
    width: 100%;
  }
  #cssmenu.small-screen &gt; ul,
  #cssmenu.small-screen.align-center &gt; ul {
    width: 100%;
    text-align: left;
  }
  #cssmenu.small-screen &gt; ul &gt; li,
  #cssmenu.small-screen.align-center {
    float: none;
    display: block;
    border-top: 1px solid rgba(100, 100, 100, 0.1);
  }
  #cssmenu.small-screen &gt; ul &gt; li:hover &gt; a,
  #cssmenu.small-screen &gt; ul &gt; li &gt; a:hover {
    color: black;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
    -ms-transform: none;
  }
  #cssmenu.small-screen &gt; ul &gt; li &gt; a::before {
    display: none;
  }
  #cssmenu.small-screen #menu-button {
    display: block;
    padding: 16px 20px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    color: black;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #e9e9e9;
  }
  #cssmenu.small-screen #menu-button:after {
    content: "";
    position: absolute;
    right: 20px;
    top: 17px;
    display: block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    width: 22px;
    height: 3px;
  }
  #cssmenu.small-screen #menu-button.menu-opened:after {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
  }
  #cssmenu.small-screen #menu-button:before {
    content: "";
    position: absolute;
    right: 20px;
    top: 27px;
    display: block;
    width: 22px;
    height: 2px;
    background: black;
  }
  #cssmenu.small-screen #menu-button.menu-opened:before {
    background: black;
  }
  
  #sessionrecord img,
  #login img,
  #email img,
  #viewsessions img,
  #register img {
    display: block;
    position: relative;
    margin: 0 auto;
    padding-top: 20px;
  }
  
  #home img {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px; 
    margin-bottom: -30px;
  }
  
  .ui-page .ui-footer p {
      margin-left: 77%;
      font-size: 12px;
      color: black;
      letter-spacing: 1px;
      font-family: 'Raleway', sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1; minimum-scale=1;"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"&gt;
    &lt;link href="/projects/ibill_v3/css/mainstyles.css" rel="StyleSheet"/&gt;
    &lt;link href="/projects/ibill_v3/css/register.css" rel="StyleSheet"/&gt;
    &lt;link href="/projects/ibill_v3/css/login.css" rel="StyleSheet"/&gt;
    &lt;link href="/projects/ibill_v3/css/home.css" rel="StyleSheet"/&gt;
    &lt;link href="/projects/ibill_v3/css/record_session.css" rel="StyleSheet"/&gt;
    &lt;link href="/projects/ibill_v3/css/viewsessions.css" rel="StyleSheet"/&gt;
    &lt;link href="/projects/ibill_v3/css/email.css" rel="StyleSheet"/&gt;
    &lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"&gt;&lt;/script&gt;
    &lt;script type='text/javascript'&gt;
              $(document).on('pageinit', function(){
                  $('#registerForm').validate({ // initialize the plugin
                      // rules &amp; options
                  });
              });  
    &lt;/script&gt;
    &lt;script type='text/javascript'&gt;
              $(document).on('pageinit', function(){
                  $('.loginform').validate({ // initialize the plugin
                      // rules &amp; options
                  });
              });  
    &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;!--********************************REGISTER PAGE**********************************************--&gt;
  &lt;!--****************************************************************************************--&gt;
  
  &lt;!--********************************HEADER**********************************************--&gt;
  &lt;div data-role="page" id="register"&gt;
      &lt;div data-role="header" data-id="foo1" data-position="fixed"&gt;
      &lt;div id='cssmenu'&gt;
        &lt;ul&gt;
           &lt;li class='active'&gt;&lt;a href='#home'&gt;Home&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href='#sessionrecord'&gt;Record a Session&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href='#viewsessions'&gt;View Sessions&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href='#email'&gt;E-mail an Invoice&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;!--********************************HEADER**********************************************--&gt;
  
  &lt;!--********************************MAIN**********************************************--&gt;
    &lt;div data-role="main" class="ui-content"&gt;
      
      &lt;img class="mainlogo" src="/projects/ibill_v3/img/ibill logo.png" alt="iBill Logo" width="250" height="190"&gt;
          &lt;section class="registerform"&gt;
            &lt;h1&gt;The iBill Invoicing App for Activity Instructors&lt;/h1&gt;
            &lt;p&gt;Register below&lt;/p&gt;
                &lt;form action="register.php" id="registerForm"&gt;
                  &lt;ul&gt;
                    &lt;li&gt;
                      &lt;label for="username"&gt;Username&lt;/label&gt;
                      &lt;input type="text" name="username" id="username" class="required" minlength="5" placeholder="enter username (min-5 characters)"&gt;
                    &lt;/li&gt;
  
                    &lt;li&gt;
                      &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
                      &lt;input type="text" name="firstname" id="firstname" class="required" minlength="5" placeholder="enter firstname"&gt;
                    &lt;/li&gt;
  
                    &lt;li&gt;
                      &lt;label for="username"&gt;Surname&lt;/label&gt;
                      &lt;input type="text" name="surname" id="surname" class="required" minlength="5" placeholder="enter surname"&gt;
                    &lt;/li&gt;
  
                    &lt;li&gt; 
                      &lt;label for="email"&gt;Email&lt;/label&gt;
                      &lt;input type="email" name="email" id="email" class="required email" placeholder="yourname@email.com"&gt;
                    &lt;/li&gt;
  
                    &lt;li&gt; 
                      &lt;label for="password"&gt;Password&lt;/label&gt;
                      &lt;input type="password" name="password" id="password" class="required" minlength="6" placeholder="enter password"&gt;
                    &lt;/li&gt;
  
                    &lt;li&gt; 
                      &lt;label for="confirmpassword"&gt;Confirm Password&lt;/label&gt;
                      &lt;input type="password" name="confirmpassword" id="confirmpassword" class="required" minlength="6" placeholder="re-enter password"&gt;
                    &lt;/li&gt;
                  &lt;div id="registerbutton"&gt;
                        &lt;input type="submit" value="Register"&gt;
                  &lt;/div&gt;
                  &lt;/ul&gt;
                &lt;/form&gt;
          &lt;/section&gt;
  
    &lt;/div&gt;
  &lt;!--********************************MAIN**********************************************--&gt;
  
  &lt;!--********************************FOOTER**********************************************--&gt;
    &lt;div data-role="footer"&gt;
      &lt;footer class="footer"&gt;
          &lt;p&gt;awilliams&amp;copy;&lt;/p&gt;
      &lt;/footer&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--********************************REGISTER PAGE**********************************************--&gt;
  &lt;!--****************************************************************************************--&gt;
   
  
  
  &lt;!--********************************LOGIN PAGE**********************************************--&gt;
  &lt;!--****************************************************************************************--&gt;
  
  &lt;!--********************************HEADER**********************************************--&gt;
  &lt;div data-role="page" id="login"&gt;
      &lt;div data-role="header" data-id="foo1" data-position="fixed"&gt;
      &lt;div id='cssmenu'&gt;
        &lt;ul&gt;
           &lt;li class='active'&gt;&lt;a href='#home'&gt;Home&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href='#sessionrecord'&gt;Record a Session&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href='#viewsessions'&gt;View Sessions&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href='#email'&gt;E-mail an Invoice&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;!--********************************HEADER**********************************************--&gt;
  
  &lt;!--********************************MAIN**********************************************--&gt;
    &lt;div data-role="main" class="ui-content"&gt;
      
      &lt;img class="mainlogo" src="/projects/ibill_v3/img/ibill logo.png" alt="iBill Logo" width="250" height="190"&gt;
          
          &lt;section class="loginform"&gt;
                &lt;form action="form.php" method="post"&gt; 
                    &lt;ul&gt;
                      &lt;li&gt;&lt;label for="usermail"&gt;Email&lt;/label&gt;
                        &lt;input type="email" name="usermail" placeholder="yourname@email.com" class="required"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;label for="password"&gt;Password&lt;/label&gt;
                        &lt;input type="password" name="password" placeholder="enter password"  minlength="6"&gt;&lt;/li&gt;
                      &lt;li&gt;
                      &lt;div id="loginbutton"&gt;
                        &lt;input type="submit" value="Login"&gt;&lt;/li&gt;
                      &lt;/div&gt;
                      &lt;div id="registerbutton"&gt;
                        &lt;input type="submit" value="Register"&gt;&lt;/li&gt;
                      &lt;/div&gt;
                    &lt;/ul&gt;
                &lt;/form&gt;
          &lt;/section&gt;
  
    &lt;/div&gt;
  &lt;!--********************************MAIN**********************************************--&gt;
  
  &lt;!--********************************FOOTER**********************************************--&gt;
    &lt;div data-role="footer"&gt;
      &lt;footer class="footer"&gt;
          &lt;p&gt;awilliams&amp;copy;&lt;/p&gt;
      &lt;/footer&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--********************************LOGIN PAGE**********************************************--&gt;
  &lt;!--****************************************************************************************--&gt;
  
  &lt;!--********************************HOME PAGE**********************************************--&gt;
  &lt;!--***************************************************************************************--&gt;
  
  &lt;!--********************************HEADER**********************************************--&gt;
  &lt;div data-role="page" id="home"&gt;
      &lt;div data-role="header" data-id="foo1" data-position="fixed"&gt;
      &lt;div id='cssmenu'&gt;
       &lt;ul&gt;
          &lt;li class='active'&gt;&lt;a href='#home'&gt;Home&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href='#sessionrecord'&gt;Record a Session&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href='#viewsessions'&gt;View Sessions&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href='#email'&gt;E-mail an Invoice&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /header --&gt;
  &lt;!--********************************HEADER**********************************************--&gt;
  
  &lt;!--********************************MAIN**********************************************--&gt;
    &lt;div data-role="main" class="ui-content"&gt;
      
      &lt;img class="mainlogo" src="/projects/ibill_v3/img/ibill logo.png" alt="iBill Logo" width="250" height="190"&gt;
          
          &lt;section class="maincontent"&gt;
                  &lt;h1&gt;The iBill Invoicing App for Activity Instructors&lt;/h1&gt;
                    &lt;p&gt;iBill is a cross-platform app that allows you track and manage activity sessions on the go.&lt;/p&gt;
                    &lt;br&gt; 
                    &lt;p&gt;Record an activity session to get started!&lt;/p&gt;
                  &lt;div style="text-align:center"&gt;
                    &lt;a href="#sessionrecord" class="ui-btn ui-btn-inline ui-mini ui-corner-all ui-shadow"&gt;Record a Session&lt;/a&gt;
                  &lt;/div&gt;
          &lt;/section&gt;
    &lt;/div&gt;
  &lt;!--********************************MAIN**********************************************--&gt;
  
  &lt;!--********************************FOOTER**********************************************--&gt;
    &lt;div data-role="footer"&gt;
      &lt;footer class="footer"&gt;
          &lt;p&gt;awilliams&amp;copy;&lt;/p&gt;
      &lt;/footer&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--********************************FOOTER**********************************************--&gt;
  
  &lt;!--********************************HOME PAGE**********************************************--&gt;
  &lt;!--***************************************************************************************--&gt;
  
  &lt;!--********************************RECORD SESSION PAGE************************************--&gt;
  &lt;!--***************************************************************************************--&gt;
  
  &lt;!--********************************HEADER**********************************************--&gt;
  &lt;div data-role="page" id="sessionrecord"&gt;
      &lt;div data-role="header" data-id="foo1" data-position="fixed"&gt;
      &lt;div id='cssmenu'&gt;
        &lt;ul&gt;
          &lt;li class='active'&gt;&lt;a href='#home'&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#sessionrecord'&gt;Record a Session&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#viewsessions'&gt;View Sessions&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#email'&gt;E-mail an Invoice&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /header --&gt;
  &lt;!--********************************HEADER**********************************************--&gt;
  
  &lt;!--********************************MAIN**********************************************--&gt;
    &lt;div data-role="main" class="ui-content"&gt;
      
      &lt;img class="mainlogo" src="/projects/ibill_v3/img/ibill logo.png" alt="iBill Logo" width="250" height="190"&gt;
          
          &lt;section class="maincontent"&gt;
            &lt;h1&gt;Record a session using the form below&lt;/h1&gt;
              &lt;form method="post" action="PHP HERE" id="sessionRecord"&gt;
                &lt;fieldset&gt;
                    &lt;select name="typeofactivity" id="typeofactivity" data-native-menu="false"&gt;
                      &lt;option&gt;Type of Session&lt;/option&gt;
                      &lt;option value="surf"&gt;Surf&lt;/option&gt;
                      &lt;option value="coast"&gt;Coasteer&lt;/option&gt;
                      &lt;option value="bodyboard"&gt;Bodyboard&lt;/option&gt;
                      &lt;option value="climbing"&gt;Cornish Challenge&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/fieldset&gt;
                &lt;fieldset&gt;
                    &lt;select name="employer" id="employer" data-native-menu="false"&gt;
                      &lt;option&gt;Employer&lt;/option&gt;
                      &lt;option value="nac"&gt;Newquay Activity Centre&lt;/option&gt;
                      &lt;option value="coastline"&gt;Coastline Coasteer&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/fieldset&gt;
                &lt;form method="post" action="PHP HERE!"&gt;
                    &lt;label for="datetime"&gt;Date and Time of Session&lt;/label&gt;
                    &lt;input type="datetime-local" data-clear-btn="false" name="datetime" id="datetime" value=""&gt;
                &lt;/form&gt;
                &lt;form method="post" action="PHP HERE!"&gt;
                    &lt;label for="amount"&gt;Amount (GBP)&lt;/label&gt;
                    &lt;input type="number" data-clear-btn="true" name="amount" id="amount" value=""&gt;
                &lt;/form&gt;
                  &lt;div id="submitbutton"&gt;
                    &lt;input type="submit" value="Submit"&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  
          &lt;/section&gt;
    &lt;/div&gt;
  &lt;!--********************************MAIN**********************************************--&gt;
  
  &lt;!--********************************FOOTER**********************************************--&gt;
    &lt;div data-role="footer"&gt;
      &lt;footer class="footer"&gt;
          &lt;p&gt;awilliams&amp;copy;&lt;/p&gt;
      &lt;/footer&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--********************************FOOTER**********************************************--&gt;
  
  &lt;!--********************************RECORD SESSION PAGE************************************--&gt;
  &lt;!--***************************************************************************************--&gt;
  
  &lt;!--********************************VIEW SESSIONS PAGE************************************--&gt;
  &lt;!--***************************************************************************************--&gt;
  
  &lt;!--********************************HEADER**********************************************--&gt;
  &lt;div data-role="page" id="viewsessions"&gt;
      &lt;div data-role="header" data-id="foo1" data-position="fixed"&gt;
      &lt;div id='cssmenu'&gt;
        &lt;ul&gt;
           &lt;li class='active'&gt;&lt;a href='#home'&gt;Home&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href='#sessionrecord'&gt;Record a Session&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href='#viewsessions'&gt;View Sessions&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href='#email'&gt;E-mail an Invoice&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /header --&gt;
  &lt;!--********************************HEADER**********************************************--&gt;
  
  &lt;!--********************************MAIN**********************************************--&gt;
    &lt;div data-role="main" class="ui-content"&gt;
      
      &lt;img class="mainlogo" src="/projects/ibill_v3/img/ibill logo.png" alt="iBill Logo" width="250" height="190"&gt;
          
          &lt;section class="maincontent"&gt;
                  &lt;!--MAIN CONTENT GOES HERE--&gt;
          &lt;/section&gt;
    &lt;/div&gt;
  &lt;!--********************************MAIN**********************************************--&gt;
  
  &lt;!--********************************FOOTER**********************************************--&gt;
    &lt;div data-role="footer"&gt;
      &lt;footer class="footer"&gt;
          &lt;p&gt;awilliams&amp;copy;&lt;/p&gt;
      &lt;/footer&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--********************************FOOTER**********************************************--&gt;
  
  &lt;!--********************************VIEW SESSIONS PAGE************************************--&gt;
  &lt;!--***************************************************************************************--&gt;
  
  
  &lt;!--********************************EMAIL AN INVOICE PAGE************************************--&gt;
  &lt;!--***************************************************************************************--&gt;
  
  &lt;!--********************************HEADER**********************************************--&gt;
  &lt;div data-role="page" id="email"&gt;
      &lt;div data-role="header" data-id="foo1" data-position="fixed"&gt;
      &lt;div id='cssmenu'&gt;
        &lt;ul&gt;
           &lt;li class='active'&gt;&lt;a href='#home'&gt;Home&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href='#sessionrecord'&gt;Record a Session&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href='#viewsessions'&gt;View Sessions&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href='#email'&gt;E-mail an Invoice&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /header --&gt;
  &lt;!--********************************HEADER**********************************************--&gt;
  
  &lt;!--********************************MAIN**********************************************--&gt;
    &lt;div data-role="main" class="ui-content"&gt;
      
      &lt;img class="mainlogo" src="/projects/ibill_v3/img/ibill logo.png" alt="iBill Logo" width="250" height="190"&gt;
          
          &lt;section class="maincontent"&gt;
                  &lt;!--MAIN CONTENT GOES HERE--&gt;
          &lt;/section&gt;
    &lt;/div&gt;
  &lt;!--********************************MAIN**********************************************--&gt;
  
  &lt;!--********************************FOOTER**********************************************--&gt;
    &lt;div data-role="footer"&gt;
      &lt;footer class="footer"&gt;
          &lt;p&gt;awilliams&amp;copy;&lt;/p&gt;
      &lt;/footer&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--********************************FOOTER**********************************************--&gt;
  
  &lt;!--********************************EMAIL AN INVOICE PAGE************************************--&gt;
  &lt;!--***************************************************************************************--&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>