A navbar makes it easier for your site visitors to move to specific places within your website. A nice-looking navigation bar always grabs the visitor's attention. This project is about ribbon-style navigation menu HTML CSS. The above image shows the finished version of the menu bar we are going to make.
Today, we will learn how to create a ribbon navigation menu. This awesome-looking navbar will create a ribbon effect on the left and right edges of the menu. Designers always want to enhance the website's look so that the visitor gets interested in their website and navigates from one page to another. This is why I made a small effect of creating a navbar snippet, which is unusual than the navbar typically sees in many websites. Earlier I shared a snippet on How to Make a Drop Down Menu using HTML and CSS, where I have shown the basic implementation of a navigation menu with HTML and CSS.
Video Tutorial:
Let's first come to the HTML markup. First of all, we will take a div whose name will be navbar. Inside this class, we will have two main elements: the name Logo and the other will be an unordered list with the name menu-area. Now inside the logo div, we will give the name of the company in text form. You can also use the PNG logo here if you want. After the logo markup, this time, we come to the nav markup. We will take five nav items inside the menu area unordered list. The five menu items are Home, About, Portfolio, Services, and another are Contact. You can use more than one nav item here. We have made a straightforward navbar HTML markup that you can do very quickly.
You May also like:
Now we come directly to the CSS markup. First, we will give a background image to the body and give it a body height of 100Vh. We have used Poppins font for this snippet, and if you want, you can use any Google font as per your need. If you do not have the font on your computer, you need to download the font from Google or use it directly by linking it to your project. I downloaded the font previously on my computer, so I didn't have to link it to my project. We will give 25px padding from the top for the navbar. Then we will provide the nav element a position relative because, based on this element, we will give the effect of ribbon on both sides. Then we will offer a width for the Nav Element using the CSS calc() function. CSS calc() function is an attribute of CSS used for performing calculations specifying CSS property values. Then we will give the logo 25% width and provide the left float value so that it moves to the left. Then I will do the styling of the menu-area unordered list nav items so that they remain on the right side of the navbar and inline.
What coding we have done so far is the typical styling of any normal navbar. We will use CSS before and after the pseudo-element to give a ribbon effect on both sides of the navbar. First, I will provide the nav before pseudo-element, an absolute position value for the left side ribbon effect. Then we will give a 10px width of solid and black border-top and border-right values. The width will remain the same for border-left and border-bottom, but the background color will be transparent. After that, we will give it a top 100% and left 0 value to create a folding effect behind the nav. For the right-side ribbon effect, we have to change only two values in the nav after the pseudo-element. Instead of border-left, border-right will have a transparent background, and in place of the left value, the right value will be 0.
Ribbon Style Navigation Menu using HTML and CSS (Source Code):
To get this CSS navigation bar code, copy the code from the code box below and paste the code into your project. After getting the code, save it and open it in your browser to see if it works. If the code is not working properly then download the code from below download button.
HTML:
CSS:
You May also like:
You Need two separate files for this. First, you need to make an HTML file for HTML mark up and then you need to make a CSS file to style the elements that you have written in the HTML file. you need to properly link the CSS file to the HTML file to get the result. The Source code for this project is given below. what you have to do is to paste the code into the respective file.
Now we come directly to the CSS markup. First, we will give a background image to the body and give it a body height of 100Vh. We have used Poppins font for this snippet, and if you want, you can use any Google font as per your need. If you do not have the font on your computer, you need to download the font from Google or use it directly by linking it to your project. I downloaded the font previously on my computer, so I didn't have to link it to my project. We will give 25px padding from the top for the navbar. Then we will provide the nav element a position relative because, based on this element, we will give the effect of ribbon on both sides. Then we will offer a width for the Nav Element using the CSS calc() function. CSS calc() function is an attribute of CSS used for performing calculations specifying CSS property values. Then we will give the logo 25% width and provide the left float value so that it moves to the left. Then I will do the styling of the menu-area unordered list nav items so that they remain on the right side of the navbar and inline.
What coding we have done so far is the typical styling of any normal navbar. We will use CSS before and after the pseudo-element to give a ribbon effect on both sides of the navbar. First, I will provide the nav before pseudo-element, an absolute position value for the left side ribbon effect. Then we will give a 10px width of solid and black border-top and border-right values. The width will remain the same for border-left and border-bottom, but the background color will be transparent. After that, we will give it a top 100% and left 0 value to create a folding effect behind the nav. For the right-side ribbon effect, we have to change only two values in the nav after the pseudo-element. Instead of border-left, border-right will have a transparent background, and in place of the left value, the right value will be 0.
Ribbon Style Navigation Menu using HTML and CSS (Source Code):
To get this CSS navigation bar code, copy the code from the code box below and paste the code into your project. After getting the code, save it and open it in your browser to see if it works. If the code is not working properly then download the code from below download button.
HTML:
CSS:
We hope you find this ribbon navigation menu code useful. There are many snippets available related to 'comment in CSS', 'dropdown menu HTML', 'sliding images HTML', 'CSS HTML Footer' etc. Make sure to click the Load More button below our homepage. Thanks for visiting the blog.
HOW DO I CHANGE THE COMPANY LOGO TEXT FOR AN IMAGE?
ReplyDeletePost a Comment
Please do not enter any spam link in the comment box.