Centred Navbar Code


This code snippet creates a navigation bar that is centered on the webpage and includes a logo and sitelinks. The navigation bar is typically placed at the top of a webpage and provides an easy way for visitors to find and access different pages on the website. The centered design of the navbar gives it a modern and sleek look. This code is a great starting point for creating a clean and user-friendly navigation experience on your website. The centered logo and links will give a unique and aesthetic look to the website.

<section class="py-5">
	<nav class="navbar navbar-expand-md bg-light">
		<div class="container">
			<a class="navbar-brand d-block d-md-none" href=""><img alt="Free Frontend Logo" class="img-fluid" height="" src="https://freefrontend.dev/wp-content/uploads/free-frontend-logo.png" width="300"></a> <button aria-controls="navbarSupportedContent5" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarSupportedContent5" data-bs-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent5">
				<ul class="navbar-nav align-items-md-center mx-auto my-2 my-lg-0">
					<li class="nav-item me-4">
						<a class="nav-link" href="">About</a>
					</li>
					<li class="nav-item me-4">
						<a class="nav-link" href="">Shop</a>
					</li>
					<li class="nav-item">
						<a class="navbar-brand d-md-block d-none me-4" href=""><img alt="Free Frontend Logo" class="img-fluid" height="" src="https://freefrontend.dev/wp-content/uploads/free-frontend-logo.png" width="300"></a>
					</li>
					<li class="nav-item me-4">
						<a class="nav-link" href="">Blog</a>
					</li>
					<li class="nav-item me-4">
						<a class="nav-link" href="">Contact</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
</section>
To top