6.1K
Ribbon Banner Navigation bar using HTML and CSS
Welcome to you in techmidpoint tutorial. We can create a beautiful navigation bar with HTML and CSS. I have mentioned below the source code of how we create a ribbon banner navigation bar using HTML and CSS. Easily you can copy and paste into your text editor and edit according to your requirement.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Ribbon Banner Navbar using HTML and CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<div class="ribbon">
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<div class="nav">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">Blog</a>
<a href="#">Privacy</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</div>
</body>
</html>
CSS
body {
background: #ddd;
font-family: monospace;
}
.wrap{
position: relative;
margin: auto;
width:1000px;
}
.ribbon {
width: 900px;
height: 60px;
margin: 100px auto 0px;
position: relative;
background: #3D79D0;
}
.nav{
position:relative;
margin-left: 0px;
margin-top: -50px;
text-align: center;
}
.nav a{
padding: 10px;
width:80px;
display: inline-block;
font-size: 16px;
text-decoration: none;
color:#fff;
text-transform: uppercase;
font-weight: bold;
}
.nav a:hover{
background: orange;
border-radius: 20px;
}
.ribbon i {
position: absolute;
}
.ribbon i:first-child, .ribbon i:nth-child(2) {
position: absolute;
left: -20px;
bottom: -20px;
z-index: -1;
border: 20px solid transparent;
border-right-color: #043140;
}
.ribbon i:nth-child(2) {
left: auto;
right: -20px;
border-right-color: transparent;
border-left-color: #043140;
}
.ribbon i:nth-child(3), .ribbon i:last-child {
width: 20px;
bottom: -20px;
left: -60px;
z-index: -2;
border: 30px solid #1D53C0;
border-left-color: transparent;
}
.ribbon i:last-child {
bottom: -20px;
left: auto;
right: -60px;
border: 30px solid #1D53C0;
border-right-color: transparent;
}
For More Tutorials Please Click Here
1 comment
Hello just wanted to give you a quick heads up.
The words in your content seem to be running off the screen in Chrome.
I’m not sure if this is a formatting issue or something
to do with web browser compatibility but I thought I’d post to let you know.
The layout look great though! Hope you get the issue solved soon. Thanks