Ribbon banner Navbar using HTML and CSS

byCodingFlicks -September 29, 2020

0

Today, I am sharing a simple snippet based on making a ribbon banner website navbar using HTML and CSS. Previously I have shared another snippet on the ribbon navigation bar. For this project, I have used plain HTML and CSS.

Navbar is an essential part of any website, and it helps visitors navigate around the website by clicking the different nav items of the menu. In this navigation menu, I have tried to show here that the edge of the navbar will look like a folder ribbon. By implementing this design to your webpage, you can make your website even more aesthetic.

In the HTML markup, I have taken a 'wrapper' div element and took another div element named 'nav-area.' to create the ribbon effect, I have taken four different div element named bar-1,bar-2,bar-3, and bar-4. After the first two div, I have placed the main menu inside a div element called 'box.'

You may also like:

I have used Poppins as the primary font for the project and have given the body a dark gray color. Using a CSS transform and translate, I took the 'wrapper' div element to the web page's middle. Then i applied some basic styling for making the nav items inline and applied a hover effect to each nav item. After that, I styled each bar element and placed them to the back of the primary nav to look like a folded ribbon. Instead of explaining any further, I am providing you the source code of this simple snippet to play around with the code by yourself.

To create this snippet, you have to make two files. One of them is HTML, and the other one is CSS. Copy and paste the code to their appropriate place and save. Run the project to your browser and make changes according to your needs.

HTML

<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>

CSS

body {
font-family: poppins;
    background: darkgray;
}
.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: #f0f0f0;
font-size: 20px;
margin: 0 15px;
padding: 5px;
text-transform: uppercase;
font-weight: 900;
}
#menu li:hover{
    background: #333;
    transition: .9s;
}
.box {
background: #F70A5D;
height: 50px;
position: relative;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.55);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.55);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 500;
margin: 3em 0;
}
.bar-1 {
border-color: #F70A5D 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 #F70A5D;
border-style: solid;
border-width: 50px;
height: 0px;
width: 0px;
position: relative;
float: left;
top: -46px;
left: -150px;
}
.bar-3 {
border-color: #F70A5D 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 #F70A5D;
border-style: solid;
border-width: 50px;
height: 0px;
width: 0px;
position: relative;
float: right;
top: -144px;
right: -145px;
}

I hope you liked it. You can follow our social media profiles to keep yourself updated for a future post from this blog. Thank you for visiting.

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