nav.html

<nav class="navbar navbar-default navbar-fixed-top pb-mobile-nav">
	
	<div class="container-fluid">
	  
	  	<div class="navbar-header">
	      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
			
		  <a class="navbar-brand" href="/index.html"><img src="/assets/images/logos/prebid_final.png"></a>
		  
    	</div>
		
		<div id="navbar" class="navbar-collapse collapse">
		    <ul class="nav navbar-nav navbar-right">
			   
		   {% assign arrSideBarSections = site.data.sidebar | where: "isSectionHeader",  "1" %}
					
			{% for sectionHeader in arrSideBarSections %}
			
				{% assign sectionIdx = forloop.index0 %}
			
				<li class="dropdown">
					<a href="#" class="dropdown-toggle pb-mobile-dropdown" data-prebidclickid="{{item.sectionId}}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
						{{ sectionHeader.sectionTitle }}
		                <span class="caret" />
					</a>
					
					<!--get subsections-->
					{% assign arrSubSections = site.data.sidebar | where: "sbSecId", sectionIdx %}
					
					<ul class="dropdown-menu">
						
						{% for subSection in arrSubSections %}
						
							{% if subSection.isSectionHeader == 0 %}
						
								{% if subSection.isHeader == 1 %}
									<li><span class="pb-mobile-dropdown-header">&nbsp;&nbsp;{{subSection.title}}</span></li>
								{% else %}
									<li><a href="{{subSection.link}}" class="pb-mobile-dropdown-item" data-prebidclickid="{{subSection.nbCollapseId}}">&nbsp;&nbsp;{{subSection.title}}</a></li>
								{% endif %}
							
							{% endif %}
						
						{% endfor %}
						
					</ul>	
				</li>
			
			{% endfor %}
					
			</ul>
		</div>
  	</div>
  	<!--end container-->
</nav>	

<nav class="navbar navbar-default navbar-fixed-top pb-main-nav">
	
	<div class="container-fluid">
	  
	  	<div class="navbar-header">
	      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
			
		  <a class="navbar-brand" href="/index.html"><img src="/assets/images/logos/prebid_final.png"></a>
		  
    	</div>
		
		<div id="navbar" class="navbar-collapse collapse">
		    <ul class="nav navbar-nav navbar-right">
			    
			    <!--get all the sections and subsections -->
			    {% assign arrSections = site.data.dropdown_v2 | where: "isHeader", "1" %}
			    
			    {% for item in arrSections %}
			    
			    <li class="dropdown">
					<a href="#" class="dropdown-toggle pb-menu-click" data-prebidclickid="{{item.sectionId}}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
						{{ item.sectionName }}
		                <span class="caret" />
					</a>
				
			    	
			    	<!-- if there are submenus - should be true each time-->
			    	{% if item.hasSubMenus == 1 %}
			    		<ul class="dropdown-menu">
			    		
			    		<!--get how many subsections-->
			    		{% assign arrSubSections = item.submenus | where: "isSubSectionStart", "1" %}
			    		
			    		{% for subSection in arrSubSections %}
			    			
			    			<!--get the items in each subsection-->
			    			{% assign idx = forloop.index0 %}
			    			{% assign arrSubItems = item.submenus | where: "subsectionId", idx %}
			    			
							<!--display subitem-->
			    			{% for subItem in arrSubItems %}
			    				
			    				{% if subItem.isSubSectionStart == 1 %}
			    					<li><a href="{{subItem.link}}" class="pb-menu-click" data-prebidclickid="{{subSection.nbCollapseId}}">{{subItem.title}}</a></li>
			    				{% else %}
			    					<li><a href="{{subItem.link}}" class="pb-menu-click" data-prebidclickid="{{subSection.nbCollapseId}}">&nbsp;&nbsp;{{subItem.title}}</a></li>
			    				{% endif %}
			    				
			    				
			    				{% if subItem.needsDivider == 1 %}
			    					<hr>
			    				{% endif %}
			    				
			    			{% endfor %}
			    			
			    			
			    		{% endfor %}
			    		
			    		</ul>

			    	{% endif %}
			    	
			    
			    {% endfor %}
			    
			    </li>
	    	</ul>
		</div>
  	</div>
  	<!--end container-->
</nav>