Navbars

Updated on pzplUI 1.5

Standard Navbar

<nav class="navbar bg-dark text-white">
	<ul>
		<li>
			<a href="#">Homepage</a>
		</li>
		<li>
			<a href="#">News</a>
		</li>
		<li>
			<a href="#">Contact</a>
		</li>
	</ul>
</nav>

.text-white a {
	color: white;
}

Navbar with Brand

<nav class="navbar bg-dark text-white">
	<a class="navbar-brand" href="javascript:void(0)">Company</a>
	<ul>
		<li>
			<a href="javascript:void(0)">Homepage</a>
		</li>
		<li>
			<a href="javascript:void(0)">News</a>
		</li>
		<li>
			<a href="javascript:void(0)">Contact</a>
		</li>
	</ul>    
</nav>

.text-white a {
		color: white;
   }

Navbar with Logo

<nav class="navbar bg-dark text-white">
	<a class="navbar-brand" href="javascript:void(0)"><img src="./browser-773215_640.png" alt="Company"></a>
	<ul>
		<li>
			<a href="javascript:void(0)">Homepage</a>
		</li>
		<li>
			<a href="javascript:void(0)">News</a>
		</li>
		<li>
			<a href="javascript:void(0)">Contact</a>
		</li>
	</ul>
</nav>

.text-white a {
	color: white;
}

Colors!

<nav class="navbar bg-normal text-white">
	<a class="navbar-brand" href="javascript:void(0)"><img src="./browser-773215_640.png" alt="Company"></a>
	<ul>
		<li>
			<a href="javascript:void(0)">Homepage</a>
		</li>
		<li>
			<a href="javascript:void(0)">News</a>
		</li>
		<li>
			<a href="javascript:void(0)">Contact</a>
		</li>
	</ul>
</nav>
	
<nav class="navbar bg-success text-white">
	<a class="navbar-brand" href="javascript:void(0)"><img src="./browser-773215_640.png" alt="Company"></a>
		<ul>
			<li>
				<a href="javascript:void(0)">Homepage</a>
			</li>
			<li>
				<a href="javascript:void(0)">News</a>
			</li>
			<li>
				<a href="javascript:void(0)">Contact</a>
			</li>
		</ul>
</nav>

Navbar Centered

Note: Make sure that you're using the layouts component if you used pzplUI customizer.

<nav class="navbar bg-dark text-white center-flex">
	<a class="navbar-brand" href="javascript:void(0)">Company</a>
	<ul>
		<li>
			<a href="javascript:void(0)">Homepage</a>
		</li>
		<li>
			<a href="javascript:void(0)">News</a>
		</li>
		<li>
			<a href="javascript:void(0)">Contact</a>
		</li>
	</ul>
</nav>

Navbar Pills

<nav class="navbar bg-dark text-white">
	<ul>
		<li class="nav-pill">
			<a href="javascript:void(0)">Homepage</a>
		</li>
		<li>
			<a class="not-pill" href="javascript:void(0)">News</a>
		</li>
		<li>
			<a class="not-pill" href="javascript:void(0)">Contact</a>
		</li>
	</ul>
</nav><br>
<nav class="navbar bg-dark text-white center-flex">
	<ul>
		<li class="nav-pill">
			<a href="javascript:void(0)">Homepage</a>
		</li>
		<li>
			<a class="not-pill" href="javascript:void(0)">News</a>
		</li>
		<li>
			<a class="not-pill" href="javascript:void(0)">Contact</a>
		</li>
	</ul>
</nav>

.text-white a {
		 color: white;
	}