ENOTES

Navigation menu bar using HTML and CSS

access_time Feb 04, 2023 remove_red_eye 1248

Navigation bar or menu bar helps user to navigate through several pages within or outside of the website. Menu bar is very essential for website for easy navigation in website. It helps to improve user experience by simplifying the navigation process. There are several ways of creating menu bar. Several bootstrap menus are also available which we can use directly in our project. But in this post we are going to learn how to make our own custom Nav bar using HTML and CSS only from scratch. Following are the step by step process to create you own menu bar.

Step 1: Create a folder in any location probably desktop will be easier to begin.

Step 2: Open that folder in VS code. Go to file and then open folder. 

Step 3: Create a new file and named it nav.html and paste the following code.

<html>
<head>
<link rel = "stylesheet" href = "nav.css">
<title>Navigation bar</title>
</head>
<body>

<div class="navbar">
<div class="navmenu">
Readersnepal
</div>

<div class="navmenu">
<span>Home</span>
<span>Feature</span>
<span>Gallery</span>
<span>About</span>
<span>Contact</span>
</div>
</div>

</body>
</html>

Step 4: Create another new file within same folder and named it nav.css and paste the following code.

.navbar{
display: flex;
justify-content: space-between;
padding: 20px;
font-size: larger;
border-bottom: 1px solid grey;
}


.navmenu span{
padding: 10px 15px 10px 15px;
transition: 0.3s;
}


.navmenu span:hover{
background-color: rgb(185, 186, 186);
padding: 20px 15px 15px 15px;
color:white;
cursor:pointer;
border-bottom:2px solid red;
}

Step 5: Open nav.html on any browser and view the output.

 Click here to social media profile card using only HTML and CSS.