How to make a attractive Navbar in HTML and CSS with Source code

Navbar in HTML and CSS

In this article, I am going to tell you how you can create a very beautiful Navbar in HTML and CSS with simple steps. you just need to write a simple code of text to create this HTML Navbar in HTML and CSS. We will use in this code HTML and simple internal CSS.

first of all, you have to create a folder, where you want to create a save file of code and then drag it or open it on your text editor, after that, you have to save this file by giving any name with the extension name .html.

after saved this file, you just write a simple structure of HTML and create content and follow the code which is given below.

Queries Solved:-

responsive navbar,navbar,navigation bar in html and css,how to create navbar in html and css,navigation bar in html and css responsive,navbar html css,navbar css,css navbar,navbar in html css,responsive navigation bar with html and css,navbar tutorial,navbar in html and css,navigation bar in html,responsive menu bar in html and css,responsive navbar in html css,navbar in html and css in hindi,animated navbar,responsive navbar html css,responsive navbar tutorial,hover effect,css navbar hover effect,css hover effects,menu hover effect,menu hover effects css,navbar hover effect,menu hover effects,css menu hover effects,navbar,navbar menu hover effect using html css,navbar css,menu bar hover effect css,css creative menu hover effects,css hover effect,link hover effect,css navbar,css menu hover effect,cool link hover effect,navbar hover effects,cool css menu hover effect,navbar hover effects css,navbar html css hover,navbar with cool hover effect,tohana,creativenetworks,best computer center in tohana,computer center in tohana, best institute in tohana,creative networks tohana,website designing,web design in tohana,creative,networks,o-level computer course,tohana best institute,creative networks computer center,computer center tohana,tohana,best computer center in tohana,best computer centre in tohana,tohana computer center,computer,computer center,learn computer in tohana,best computer institute in tohana,#computer,computer course kahan se kren,cn tohana,#computer tricks,#learn computer,auto cad in tohana,#computer short cut,photoshop in tohana,website designing in tohana,nielit tohana

<!DOCTYPE html> <html> <head> <title>Navbar design in HTML and CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <style type="text/css"> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300&display=swap'); * { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; } body { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; background-color: #ffffff; } .navbar { display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 0px 50px; border-radius: 50px; width: 90%; height: 100px; background-color: #fff; color: #000; box-shadow: 12px 12px 20px 0 rgb(208 209 210); } .navbar h2 { font-size: 40px; } .navbar ul { display: flex; height: 100px; align-items: center; } .navbar ul li { list-style: none; margin-right: 40px; font-weight: bolder; font-size: 18px; cursor: pointer; position: relative; } .navbar ul li:after { content: ''; position: absolute; display: block; width: 0%; height: 3px; background-color: #0160e7; bottom: -37px; transition: .3s; } .navbar ul li:first-child:after { width: 100%; } .navbar ul li:hover:after { width: 100%; } .navbar ion-icon { color: #000; cursor: pointer; font-size: 18px; padding: 20px; border-radius: 50%; background-color:#f0f6ff; } .navbar button { width: 180px; height: 55px; border-radius: 40px; margin-left: 20px; color: #fff; font-weight: bolder; background-color: #0160e7; font-size: 18px; border: 1px solid #0160e7; cursor: pointer; box-shadow: 12px 12px 20px 0 rgb(1 126 231 / 30%); transition: 0.5s; position: relative; overflow: hidden; padding: 1px; } .navbar button:before { content: ''; position: absolute; width: 70%; height: 55px; top: 0; transition: .8s; left: -150%; bottom: 0; background: linear-gradient(to left, rgb(255 255 255 / 25%), transparent); } .navbar button:hover { box-shadow: none; } .navbar button:hover:before { left: 70%; } .social { display: flex; justify-content: center; } </style> <body> <div class="navbar"> <h2><span style="color: #0160e7;">C</span><span>N</span></h2> <ul> <li class="active">Home</li> <li>About</li> <li>Contact</li> <li>Blog</li> <li>Privacy</li> </ul> <div class="social"> <ion-icon name="search-outline"></ion-icon> <button>Contact Us</button> </div> </div> <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script> </body> </html>