This is a basic header bar with logo and navigation that would typically be included from a separate file in the _partials folder.

<header id="primary" class="primary wide">
  <div class="container">
    <div id="logo">
      <a href="/">
        <img src="/images/layouts/logo.svg">
      </a>
    </div>
    <button id="menu" type="button">
      <span class="menu-bars">
        <span class="menu-bar"></span>
      </span>
    </button>
    <nav id="navigation" class="navigation">
      <cfset navCounter = 0>
      <cfset navTotalCounter = 0>
      <ul>
        <!--- you can set this to the parentID in order to change toolbar (primary navigation) to display children of a different parent  
          if you want to pull the main pages of the site, insert 0 as the ParentID --->   
        <cfset qry_toolbartop_ParentID = 0>
        
        <!--- you can omit a page from being in the toolbar (primary navigation) by putting it's pageid here --->
        <cfset qry_toolbartop_OMIT = 2350>
          
        <!--- Query to grab the main pages of the website --->
        <cfinclude template="#request.dir_globals#/layouts/qry_toolbarpages.cfm">
          
        <!--- loop through the top level pages of the website --->
        <cfoutput query="qry_toolbartop">
        <cfset navTotalCounter = navTotalCounter + 1>
        
        <cfif len(fldExternalLink) and not val(request.page_adminAccess)>
          <cfset link2display = fldExternalLink>
            
          <cfelseif val(qry_sitesecurity.fld_site_permalinks) and len(fldAlias)>
          <cfset link2display = fldAlias>
          
        <cfelse>
          <cfset link2display = "#variables.baseHref##request.self#/PageID/#fldPageID_PK##request.addtoken#">
        </cfif>
          
        <cfif fldToolBarTitle is not "">
          <cfset displayTitle = "#fldToolBarTitle#">
        <cfelse>
          <cfset displayTitle = "#fldTitle#">
        </cfif>
        <cfif fldPageID_PK EQ qry_pageinfo.fldParentID OR fldPageID_PK EQ qry_pageinfo.fldPageID_PK OR fldPageID_PK EQ qry_parentinfo.fldParentID>
          <li><a href="#link2display#" class="active <cfif navTotalCounter EQ 1>first<cfelseif navTotalCounter EQ qry_toolbartop.recordcount>last</cfif>">#displayTitle#</a>
        <cfelse>
          <li><a href="#link2display#" <cfif navTotalCounter EQ 1>class="first"<cfelseif navTotalCounter EQ qry_toolbartop.recordcount>class="last"</cfif>>#displayTitle#</a>
        </cfif>
          </li>
          
        <cfset navCounter = #navCounter# + 1> 
        </cfoutput>
      </ul>
    </nav><!--- END NAVIGATION --->
  </div>
</header>

This is a JavaScript function to expand and collapse the navigation on mobile. This is included in the /js/_globals.js file.

var navigation = (function() {
  var el = $("navigation");
  var button = $("menu");
  var navOpen = false;
  var ulHeight = function() {return el.down("ul").getHeight();};
  var open = function() {
    el.setStyle({height: ulHeight() + "px"}); 
    el.addClassName("active"); 
    button.addClassName("active");
    navOpen = true;
  };
  var close = function() {
    el.setStyle({height: 0 + "px"}); 
    el.removeClassName("active"); 
    button.removeClassName("active");
    navOpen = false;
  };
  var events = (function() {
    button.on("click", function(event,element){
      navOpen == false ? open() : close();
    });
  }());
  return {
    open: open,
    close: close
  }
}());