<li class="nav-item">
	<a class="nav-link" href="/pollinator-habitat/index.php">Home</a>
</li>
<li class="nav-item dropdown dropdown-hover"><a id="navbarDropdown1col" class="nav-link dropdown-toggle" role="button" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pollinator Habitats<i class="fas fa-lg fa-angle-down ml-auto ml-lg-2"></i></a>
	<div class="offcanvas-collapse-sub">
		<div class="offcanvas-header px-2"><button type="button" class="btn my-2 offcanvas-back"><i class="fas fa-times mr-1"></i> Close</button><div class="align-self-center mx-3">Pollinator Habitats</div></div>
		<ul id="navbarDropdown1col" class="dropdown-menu list-unstyled">
			<li><a class="dropdown-item" href="/pollinator-habitat/brigham-city/index.php">Brigham City Rest Stop</a></li>
			<li><a class="dropdown-item" href="/pollinator-habitat/perry/index.php">Perry Rest Stop</a></li>
</ul>
	</div>
</li>
<li class="nav-item">
	<a class="nav-link" href="/pollinator-habitat/resources.php">Resources</a>
</li>
<li class="nav-item">
	<a class="nav-link" href="/pollinator-habitat/get-involved.php">Get Involved</a>
</li>
<li class="nav-item">
	<a class="nav-link" href="/pollinator-habitat/about.php">About</a>
</li>



<!-- <li class="nav-item dropdown dropdown-hover">
<!-- 	<a class="nav-link dropdown-toggle" id="navbarDropdownMenu3" data-toggle="dropdown" href="" role="button" aria-haspopup="true" aria-expanded="false">1 Column <i class="fas fa-lg fa-angle-down ml-auto ml-lg-2"></i></a>
	<div class="offcanvas-collapse-sub">
		<div class="offcanvas-header px-2">
			<button type="button" class="btn my-2 offcanvas-back"><i class="fas fa-times mr-1"></i> Close</button>
			<div class="align-self-center mx-3">1 Column</div>
		</div>
		<ul class="dropdown-menu list-unstyled" aria-labelledby="navbarDropdownMenu3">

			<li><a class="dropdown-item" href="#">Link 1</a></li>
			<li><a class="dropdown-item" href="#">Link 2</a></li>

			<li class="dropdown-divider"></li>

			<li><a class="dropdown-item" href="#">Link 3</a></li>
			<li><a class="dropdown-item" href="#">Link 4</a></li>
			<li><a class="dropdown-item" href="#">Link 5</a></li>

			<li class="dropdown-divider"></li>

			<li><a class="dropdown-item" href="#">Link 6</a></li>
			<li><a class="dropdown-item" href="#">Link 7</a></li>

			<li class="dropdown-divider"></li>

			<li><a class="dropdown-item" href="#">Link 8</a></li>
		</ul>
	</div>
</li>

<li class="nav-item dropdown">
	<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2col" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		2 Columns <i class="fas fa-lg fa-angle-down ml-auto ml-lg-2"></i>
	</a>
	<div class="offcanvas-collapse-sub">
		<div class="offcanvas-header px-2">
			<button type="button" class="btn my-2 offcanvas-back"><i class="fas fa-times mr-1"></i> Close</button>
			<div class="align-self-center mx-3">2 Columns</div>
		</div>
		<div class="dropdown-menu dropdown-menu-left multi-column multi-column-2" aria-labelledby="navbarDropdown2col">
			<div class="container">
				<div class="row d-flex flex-row">
					<div class=" col-lg-6 dropdown-flex-col border">
						<ul>
							<li><a class="dropdown-item" href="#">Link 1</a></li>
							<li><a class="dropdown-item" href="#">Link 2</a></li>
							<li><a class="dropdown-item" href="#">Link 3</a></li>
						</ul>
					</div>
					<div class=" col-lg-6 dropdown-flex-col">
						<ul>
							<li><a class="dropdown-item" href="#">Link 4</a></li>
							<li><a class="dropdown-item" href="#">Link 5</a></li>
							<li><a class="dropdown-item" href="#">Link 6</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div> 
	</div>
</li>

<li class="nav-item dropdown">
	<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3col" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		3 Columns <i class="fas fa-lg fa-angle-down ml-auto ml-lg-2"></i>
	</a>
	<div class="offcanvas-collapse-sub">
		<div class="offcanvas-header px-2">
			<button type="button" class="btn my-2 offcanvas-back"><i class="fas fa-times mr-1"></i> Close</button>
			<div class="align-self-center mx-3">3 Columns</div>
		</div>
		<div class="dropdown-menu dropdown-menu-left multi-column multi-column-3" aria-labelledby="navbarDropdown3col">
			<div class="container">
				<div class="row d-flex flex-row">
					<div class="col-lg-4 dropdown-flex-col border">
						<ul class="list-unstyled ">
							<li><a class="dropdown-item" href="#">Link 1</a></li>
							<li><a class="dropdown-item" href="#">Link 2</a></li>
							<li><a class="dropdown-item" href="#">Link 3</a></li>
						</ul>
					</div>
					<div class="col-lg-4 dropdown-flex-col border">
						<ul class="list-unstyled ">
							<li><a class="dropdown-item" href="#">Link 4</a></li>
							<li><a class="dropdown-item" href="#">Link 5</a></li>
							<li><a class="dropdown-item" href="#">Link 6</a></li>
						</ul>
					</div>
					<div class="col-lg-4 dropdown-flex-col">
						<ul class="list-unstyled ">
							<li><a class="dropdown-item" href="#">Link 7</a></li>
							<li><a class="dropdown-item" href="#">Link 8</a></li>
							<li><a class="dropdown-item" href="#">Link 9</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</li>

<li class="nav-item dropdown dropdown-hover mega-menu">
	<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="navbarDropdownMenu12" href="#" role="button" aria-haspopup="true" aria-expanded="false">Megamenu <i class="fas fa-lg fa-angle-down ml-auto ml-lg-2"></i></a>
	<div class="offcanvas-collapse-sub">
		<div class="offcanvas-header px-2">
			<button type="button" class="btn my-2 offcanvas-back"><i class="fas fa-times mr-1"></i> Close</button>
			<div class="align-self-center mx-3">Megamenu</div>
		</div>
		<div class="dropdown-menu" aria-labelledby="navbarDropdownMenu12">
			<div class="container">
				<div class="row"> 
					<div class="col-lg-3 dropdown-flex-col order-lg-3">
						<ul>
							<li><a href="#">Consectetur adipiscing</a></li>
							<li><a href="#">Veniam</a></li>
							<li><a href="#">Lorem ipsum</a></li>
						</ul>
					</div> 
					<div class="col-lg-6 dropdown-flex-col border order-lg-2">
						<span class="col-title">Column Title</span>
						<div class="row">
							<div class="col-lg-6">
								<ul>
									<li><a href="#">Consectetur adipiscing</a></li>
									<li><a href="#">Eiusmod</a></li>
									<li><a href="#">Labore et dolore</a></li>
								</ul>
							</div>
							<div class="col-lg-6">
								<ul>
									<li><a href="#"><i class="fas fa-calendar-alt mr-2"></i>With icon</a></li>
									<li><a href="#">Ut enim ad minim veniam quis nostrud</a></li>
									<li><a href="#">Labore</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-lg-3 dropdown-flex-col border order-lg-1">
						<span class="col-title">Column Title</span>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aliqua. Ut enim ad minim veniam, quis nostrud ex ea commodo consequat.</p>
						<p class="d-flex"><a class=" ml-auto" href="#">Read more</a></p>
					</div>
				</div>
			</div>
		</div>
	</div></li>

<li class="nav-item ml-lg-auto mr-lg-3 mt-4 mt-lg-0">
	<a class="nav-link nav-btn bg-bright-light" href="#">Sign Up</a>
</li> -->