Ribbon banner Navbar using HTML and CSS

byCodingFlicks -September 29, 2020

0

Navigation bars are considered one of the important elements of a website. These elements of a website allow users to easily navigate from one section to another or from one page to another. A navigation bar or navigation menu is usually placed at the top or side of the website. Today, we are going to share a snippet of a ribbon banner-style website navigation bar using HTML and CSS. We have included a video tutorial below on how to create this snippet. Please watch the video tutorial before collecting the source code, as it will help you understand the code.

Video Tutorial:

We hope you have watched the video tutorial above. The navigation bar is an essential part of any website, and it helps visitors navigate around the website by clicking on the different navigation items in the menu. In this navigation menu, we have tried to create a simple navigation bar where the edges of the navbar look like ribbons. Besides using conventional designs, we can use this technique to give the navbar an aesthetic look.

In the HTML markup, we have a 'wrapper' div element and another div element called 'nav-area'. To create the ribbon effect, we have four different div elements called bar-1, bar-2, bar-3, and bar-4. After the first two divs, we have placed the main menu inside a div element called 'box'. We used Poppins as the primary font for the project and gave the body a deep sky blue color. Using CSS transform and translate, we moved the 'wrapper' div element to the center of the viewport. We then applied some basic styling to inline the navigation items and applied a hover effect to each navigation item. Next, we styled each bar element and placed them behind the primary navigation to look like a folded ribbon. Rather than explain anything further, we're providing the source code for this simple snippet for you to use the code yourself.

You May Also Like:

- Gradient Border Animation

- Bootstrap 5 Testimonial Carousel

Ribbon Navbar using HTML and CSS [ Source Code ]:

To create this snippet, you have to create an HTML and a CSS file. Then, copy the code from the code box below and paste it into those files. Test the code in your favorite browser for any errors. You can download the code by clicking the download button below this blog post.

HTML

  <!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->	
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ribbon banner Navbar using HTML and CSS</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
		<div id="nav-area">
			<div class="bar-1"></div>
			<div class="bar-2"></div>
			<div class="box">
				<ul id="menu">
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Portfolio</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
			<div class="bar-3"></div>
			<div class="bar-4"></div>
		</div>
	</div>
</body>
</html>

CSS

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
	font-family: "Poppins", sans-serif;
	background: deepskyblue;
}
.wrapper {
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#nav-area {
	width: 950px;
}
#menu li {
	list-style: none;
	display: block;
	float: left;
	padding: 5px;
}
#menu li a {
	display: block;
	text-decoration: none;
	color: #000;
	font-size: 20px;
	margin: 0 15px;
	padding: 5px;
	text-transform: uppercase;
	font-weight: 500;
}
#menu li:hover {
	background: #000;
	transition: .9s;
	color: ;
}
#menu li:hover a {
    color: #ddd;
  }
  .box {
	background: #fff;
	height: 50px;
	position: relative;
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.55);
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.6);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	z-index: 500;
	margin: 3em 20px;
}
.bar-1 {
	border-color: #fff transparent transparent;
	border-style: solid;
	border-width: 50px;
	height: 0px;
	width: 0px;
	position: relative;
	float: left;
	top: 1px;
	left: -50px;
}
.bar-2 {
	border-color: transparent transparent #fff;
	border-style: solid;
	border-width: 50px;
	height: 0px;
	width: 0px;
	position: relative;
	float: left;
	top: -47px;
	left: -150px;
}
.bar-3 {
	border-color: #fff transparent transparent;
	border-style: solid;
	border-width: 50px;
	height: 0px;
	width: 0px;
	position: relative;
	float: right;
	right: -49px;
	top: -98px;
}
.bar-4 {
	border-color: transparent transparent #Ffff;
	border-style: solid;
	border-width: 50px;
	height: 0px;
	width: 0px;
	position: relative;
	float: right;
	top: -144px;
	right: -145px;
}

We need to understand that without a well-designed navigation menu, visitors feel confused, frustrated, and are more likely to leave the website. A navigation menu makes it easier to explore the website content and find information quickly. We hope you have collected the source code. Thanks for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.