Split Nav with Logo in Middle

Sometimes a design will require the main navigation to be split and placed on either side of a centered logo. 

HTML 

<div id="header_spacer">

<header id="primary" class="primary wide">
    <button id="menu" type="button">
        <span class="menu-bars">
            <span class="menu-bar"></span>
        </span>
    </button>

    <div class="container">
        <div id="logo">
            <a href="/">
                <img src="/images/layouts/logo.svg">
            </a>
        </div>

        <nav id="navigation" class="navigation">
            <cfset navCounter = 0>
            <cfset navTotalCounter = 0>

            <!--- 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 = 2998>
    
            <!--- you can omit a page from being in the toolbar (primary navigation) by putting it's pageid here --->
            <cfset qry_toolbartop_OMIT = "2998">
            
            <!--- Query to grab the main pages of the website --->
            <cfinclude template="#request.dir_globals#/layouts/qry_toolbarpages.cfm">
            
            <cfset request._nav_maxRows = qry_toolbartop.recordcount>

            <cfset request._nav_split = Int(request._nav_maxRows / 2)>

            <ul>
                <cfloop from="1" to="2" index="request._nav_split_loop">
                    <cfset request._nav_startRow = 1>
                    <cfif request._nav_split_loop GT 1>
                        <cfset request._nav_startRow = request._nav_startRow + request._nav_split>
                    </cfif>
                    
                    <div class="nav_split_column">
                        <!--- loop through the top level pages of the website --->
                        <cfoutput query="qry_toolbartop" maxRows="#request._nav_split#" startRow="#request._nav_startRow#">
                            
                            <!--- QUERY TO PULL DROP DOWN MENU --->
                            <cfquery name="qry_toolbarsub2" datasource="#request.dsn#">
                                SELECT fldPageID_PK, fldTitle, fldExternalLink, fldToolBarTitle, fldParentID, fldAlias
                                FROM tblPages
                                WHERE fldSiteID = '#REQUEST.SiteID#' AND fldParentID = #fldPageID_PK#
                                    and fld_date_deleted IS NULL
                                ORDER BY fldSortID
                            </cfquery>
                                
                            <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 = "/#request.self#/PageID/#fldPageID_PK##request.addtoken#">
                            </cfif>
                
                            <cfif fldToolBarTitle is not "">
                                <cfset displayTitle = "#fldToolBarTitle#">
                            <cfelse>
                                <cfset displayTitle = "#fldTitle#">
                            </cfif>
                            
                            <cfset request.item_classes = "">
                            <cfif fldPageID_PK EQ qry_pageinfo.fldParentID OR fldPageID_PK EQ qry_pageinfo.fldPageID_PK OR fldPageID_PK EQ qry_parentinfo.fldParentID>
                                <cfset request.item_classes = ListAppend(request.item_classes, "active", " ")>
                            </cfif>
                            
                            <cfif navTotalCounter EQ 1>
                                <cfset request.item_classes = ListAppend(request.item_classes, "first", " ")>
                            
                            <cfelseif navTotalCounter EQ qry_toolbartop.recordcount>
                                <cfset request.item_classes = ListAppend(request.item_classes, "last", " ")>
                            </cfif>
            
                            <li rel="#displayTitle#">
                                <a href="#link2display#"<cfif len(Trim(request.item_classes))> class="#request.item_classes#"</cfif>>#displayTitle# <cfif val(qry_toolbarsub2.recordcount)><div class="subnavOpen"><span class='ico-arrow-down'></span></div></cfif></a>
                                
                                <!--- DROP DOWN MENU --->
                                <cfif val(qry_toolbarsub2.recordcount)> <!--- loop #2 :    Standard Dropdown --->
                                    <div class="subnavMask">
                                        <ul class="subNav">
                                            <cfloop query="qry_toolbarsub2">
                                                <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 = "/#request.self#/PageID/#fldPageID_PK##request.addtoken#">
                                                </cfif>
                                                <cfif fldToolBarTitle is not "">
                                                    <cfset displayTitle = "#fldToolBarTitle#">
                                                <cfelse>
                                                    <cfset displayTitle = "#fldTitle#">
                                                </cfif>
            
                                                <cfset request.item_classes = "">
                                                <cfif fldPageID_PK EQ qry_pageinfo.fldParentID OR fldPageID_PK EQ qry_pageinfo.fldPageID_PK OR fldPageID_PK EQ qry_parentinfo.fldParentID>
                                                    <cfset request.item_classes = ListAppend(request.item_classes, "active", " ")>
                                                </cfif>
                    
                                                <li<cfif len(Trim(request.item_classes))> class="#request.item_classes#"</cfif>><a href="#link2display#">#displayTitle#</a></li>
                                            </cfloop>
                                        </ul>
                                    </div>
                                </cfif>
                            </li>
                            <cfset navCounter++>
                        </cfoutput>
                    </div>
                </cfloop>
            </ul>
        </nav>
    </div>
</header>
 
</div>

CSS 

/*  Header
   ========================================================================== */

.primary {
  position: relative;
  padding-top: 16px;
  padding-bottom: 16px;
  display: block;
  background-color: #fff;
  z-index: 3000;
}

.primary > .container {
  width: 90%;
  overflow: hidden;
}

#logo{
  position: relative;
  margin: 0 auto;
  width: 18%;
  max-width: 240px;
  transition: .25s ease-out;
  line-height: 1;
  z-index: 200;
}

#logo,
#logo a {
  display: block;
}

#logo img {
  width: 100%;
  height: auto;
}

/*  Navigation
   ========================================================================== */

#menu {
  display: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}


.navigation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column;
  -webkit-justify-content: center;
            -ms-flex-pack: center;
          justify-content: center;
}

.navigation ul {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: visible;
  font-size: 0;
}

.navigation ul:after {
  content: '';
  display: table;
  clear: both;
}

.navigation ul .left,
.navigation ul .right {
  position: relative;
  width: 39%;
  padding: 0;
  transition: .2s cubic-bezier(.4,0,.2,1);
}

.navigation ul .left {
  float: left;
  text-align: right;
}

.navigation ul .right {
  float: right;
  text-align: left;
}

.navigation ul li {
  position:relative;
  display:inline-block;
}

.navigation ul li,
.navigation ul li a {
  text-align: center;
  font-size: 16px;
}

.navigation ul li a {
  display: block;
  padding: 20px;
  margin: 0;
  color: #413d3a;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  transition: .2s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
}

.navigation ul li a.active,
.navigation ul li a.active:hover,
.navigation ul li a:hover {
  color: #005a9c;
}

@media (max-width: 768px) {
  .primary {
      position: relative;
      padding: 0;
      height: auto;
    }
    
  .primary > .container {
    width:100%;
  }
      
  #logo {
    margin-left: 5%;
    padding: 10px 0;
    width: 182px;
  }
        
  .navigation {
    position: relative;
    display: block;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 0;
    float: none;
    transition: .4s ease-out;
    overflow: hidden;
  }
      
  .navigation ul {
    height: auto;
    width: 100%;
    background: #434343;
  }
        
  .navigation ul .left,
  .navigation ul .right{
    float: none;
    width: 100%;
    height: auto;
  }

  .navigation ul li,
  .navigation ul li a {
    width: 100%;
    display: block;
    float: none;
    margin: 0;
  }

  .navigation ul li a {
    color: #fff;
    box-sizing: border-box;
    padding: 12px 5%;
    font-size: 18px;
    line-height: 24px;
    text-align: left;
  }
  
  .navigation ul li a.active,
  .navigation ul li a.active:hover,
  .navigation ul li a:hover {
    color: #fff;
  }
}