Awesome Ribbon Styled Navigation Menu

A navbar is a process to navigate around the different pages of a website. It makes the job more comfortable for the user to go to a particular section or a page by clicking on the navbar's nav items. If the navbar is not well -organized and the visitor can't find the pages they are looking for, it will lead to a higher bounce and conversion rate. So focusing on the navbar design while creating a website is one of the best practices.

This blog will create a simple menu for the website with nice folded edges like a ribbon on both sides. In recent times, developers try to make their websites look professional to grab the visitors' attention. The homepage is the entry door of any website, and if the navigation menu looks excellent, visitors will find it exciting and want to explore more content of the website. For this snippet, I will suggest you watch the video below till the end. In this way, you will have an idea about the coding that is being used here.

I hope you have watched the entire video and understood the necessary coding behind this project. I have a div called 'custom-padding' to give the navbar padding from the top in the HTML part. After that, I took a nav element and placed a div named 'logo' and another div element named 'menu-area' to put the project's nav items. I have taken five nav items on this menu. In the 'logo' div, I have placed plain text as the logo. You can place any text of your choice or any brand logo images in there. that's all for the HTML markup, and nothing is complicated in here,

You may also like:

Let's move to the CSS part of the project. First, I have eliminated the document's default margin and padding by providing a zero value to each and used 'box-sizing: border-box.' then, I gave the body element a random background image and height 100vh. I have used other styles like background-size and background-position so that the background image fits on the homepage. Then I have styled the nav items with some basic styling and provided a padding-top value for the 'custom-padding' div element so that the navbar gets some space from the top of the viewport of the homepage. I gave each nav item an orange color background color hover effect and styled 'logo' div element. After that, I gave the nav element a relative position value, and based on that, I have used pseudo-elements to create the ribbon-style edge effect on both sides of the navbar. Without further explanation, I am providing you the codes to use it and do some experiment by yourself.

Ribbon Style Navigation Menu ( Source Code ):

To Create this snippet, you need to create an HTML and CSS file. Please copy the code below and paste them into the appropriate files and save.

ADD CSS

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Awesome Ribbon Styled Navigation Menu</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="custom-padding">
		<nav>
			<div class="logo">
				Logo
			</div>
			<ul class="menu-area">
				<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>
		</nav>
	</div>
</body>
</html>

ADD CSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background-image: url(https://images.pexels.com/photos/204262/pexels-photo-204262.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	height: 100vh;
}
.menu-area li a {
	text-decoration: none;
	color: #fff;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: block;
	padding: 0 25px;
	font-size: 14px;
	line-height: 30px;
	position: relative;
	z-index: 1;
}
.menu-area li {
	list-style: none;
	display: inline-block;
}
.custom-padding {
	padding-top: 25px;
}
nav {
	position: relative;
	padding: 10px 20px 10px 10px;
	text-align: right;
	z-index: 1;
	background: #333;
	margin: 0 auto;
	width: calc(100% - 60px);
}
.logo {
	width: 15%;
	float: left;
	text-transform: uppercase;
	color: #fff;
	font-size: 25px;
	text-align: left;
	padding-left: 2%;
}
.menu-area li a:hover {
	background: tomato;
	color: #fff;
}
nav:before {
	position: absolute;
	content: '';
	left: 0;
	top: 100%;
	border-top: 10px solid #333;
	border-right: 10px solid #333;
	border-left: 10px solid transparent;
	border-bottom: 10px solid transparent;
}
nav:after {
	position: absolute;
	content: '';
	border-top: 10px solid #333;
	border-left: 10px solid #333;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	top: 100%;
	right: 0;
}

I hope you find it useful. To stay connected with this blog, please follow our social media profiles. Thanks for stopping by this blog, and keep coming.

Post a Comment

Post a Comment

About Us

Contact Form

Awesome Ribbon Styled Navigation Menu

You might like

Post a Comment

Post a Comment

Contact Form