New Tutorials:   TKINTER    KOTLIN    JAVASCRIPT    SASS/SCSS    PL/SQL    Matplotlib    C++ Programs
CLOSE
   HTML  CSS  Web Development  
   Technology    Programming

Create Modern Navigation Bar with Icons using HTML, CSS and Hover effect

         
 NOVEMBER 21, 2020   by onlyklohan

We have seen navigation bars or top navbars in almost every website and the navbar is one of the basic thing which makes the website attractive and more user friendly(easily navigatable). Navigation bar can be of different types and different styles.

What is Navigation Bar?

Navigation bar is a UI element in the website which contains links to other sections of the same website or other website. In maximum websites the navigation bar is displayed on almost every page of the website but this can differ.

In most of the website the navigation bar is mostly displayed as a horizontal list of links (link to different parts of the website) at the top of every page styled in such a way that it perfectly fits into the website design.

The navigation bar contains the website logo and other navigation options and a search bar too.

Although in most of the cases the navigation bar is placed horizontally at the starting of the webpage(on top), but in some cases, a horizontal naigation bar may not fit the website design, so in this type of case we create a vertical navigation bar on the left side or right side of the website. This type of vertical navigation bar is also called a sidebar, as it appears on the side of the main content. Some websites have both a horizontal navigation bar at the top and a vertical navigation bar on the left or right side of each website.

Many other websites uses horizontal navigation bar for desktop view and a vertical navigation bar for the mobile view of their websites.

In this tutorial, we will learn how to create a simple Horizontal Navigation Bar for any website in few simple steps by just using HTML, CSS and some hover effect.

Step 1

Create a new folder in your computer and name it something like "Navbar"

In the "Navbar" folder we will save our HTML and CSS files which are required in our project to create a navigation bar and style the navigation bar. After creating the "Navbar" folder, open any text editor(we are using Brackets) to create HTML and CSS file.

Step 2

Create 2 new files in the text editor and name it nav.html and nav.css ,then save it in the "Navbar" folder

Step 3.

Next, we will create the basic structure of the Navigation bar using HTML and link the nav.css file (which we will create in the next steps) using

<link rel="stylesheet" type="text/css" href="nav.css">

HTML Code:

Here is the HTML code:

<!doctype html>
    <head>
        <title>Navigation Bar with different Icons</title>
        <!-- change or write your page title with the help of title tags-->
        <link rel="stylesheet" type="text/css" href="nav.css">
        <!-- connect css file with html useing link tag -->
        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <!-- link this font-awesome icon css link with html file for accessing all fornt awesome
        icon form boostrapcdn.com -->
    </head>
    <body>
        <ul>
            <!--starting ul tag to create unordered lists.-->
            <li>
                <!--The HTML li element is used to represent an item in a list. ... In menus and unordered lists-->
                <!--the a tag defines a hyperlink, which is used to link from one page to another-->
                <a href="#">
                    <!-- this anchor text for link your home to another page -->
                    <div class="icon">
                        <i class="fa fa-home" aria-hidden="true"></i><!-- this is home icon link get form fornt-awesome icon for home button -->	
                        <i class="fa fa-home" aria-hidden="true"></i><!-- copy and paste the home icon link here for hover effect -->	
                    </div>
                    <div class="name"><span data-text="Home">Home</span></div>
                    <!-- we are create first menu item name home -->
                </a>
            </li>
            <li>
                <a href="#">
                    <!-- this anchor text for link your About page to another page -->
                    <div class="icon">
                        <i class="fa fa-file" aria-hidden="true"></i><!-- this is file icon link get form fornt-awesome icon for about -->	
                        <i class="fa fa-file" aria-hidden="true"></i><!-- copy and paste the file icon link here for hover effect -->		
                    </div>
                    <div class="name"><span data-text="About">About</span></div>
                    <!-- we are create second menu item name About -->
                </a>
            </li>
            <li>
                <a href="#">
                    <!-- this anchor text for link your service page to another page -->
                    <div class="icon">
                        <i class="fa fa-cogs" aria-hidden="true"></i><!-- this is cogs icon link get form fornt-awesome iocn for service menu -->	
                        <i class="fa fa-cogs" aria-hidden="true"></i><!-- copy and paste the cogs icon link here for hover effect -->	
                    </div>
                    <div class="name"><span data-text="Services">Services</span></div>
                    <!--- we are create third menu item name services -->
                </a>
            </li>
            <li>
                <a href="#">
                    <!-- this anchor text for link your portfolio page to another page -->
                    <div class="icon">
                        <i class="fa fa-picture-o" aria-hidden="true"></i><!-- this is picture icon link get form fornt-awesome icon for portfolio --> 	
                        <i class="fa fa-picture-o" aria-hidden="true"></i><!-- copy and paste the picture icon link here for hover effect -->		
                    </div>
                    <div class="name" ><span data-text="Portfolio">Portfolio</span></div>
                    <!-- we are create fourth menu item name portfolio -->
                </a>
            </li>
            <li>
                <a href="#">
                    <!-- this anchor text for link your team page to another page -->
                    <div class="icon">
                        <i class="fa fa-users" aria-hidden="true"></i><!-- this is picture icon link get form fornt-awesome icon for portfolio --> 	
                        <i class="fa fa-users" aria-hidden="true"></i><!-- copy and paste the home icon link here for hover effect -->			
                    </div>
                    <div class="name"><span data-text="Team">Team</span></div>
                    <!-- we create first menu item name home -->
                </a>
            </li>
            <li>
                <a href="#">
                    <!-- this anchor text for link your home to another page -->
                    <div class="icon">
                        <i class="fa fa-envelope" aria-hidden="true"></i><!-- this is picture icon link get form fornt-awesome icon for portfolio --> 		
                        <i class="fa fa-envelope" aria-hidden="true"></i><!-- copy and paste the home icon link here for hover effect -->		
                    </div>
                    <div class="name"><span data-text="Contact">Contact</span></div>
                    <!-- we create first menu item name home -->
                </a>
            </li>
            <li>
                <a href="#">
                    <!-- this anchor text for link your Blog page to another page -->
                    <div class="icon">
                        <i class="fa fa-book" aria-hidden="true"></i><!-- this is Book icon link get form fornt-awesome icon for Blog --> 	
                        <i class="fa fa-book" aria-hidden="true"></i><!-- copy and paste the Book icon link here for hover effect -->		
                    </div>
                    <div class="name"><span data-text="Blog">Blog</span></div>
                    <!-- we are create seventh menu item name Blog -->
                </a>
            </li>
            <li>
                <a href="#">
                    <!-- this anchor text for link your cart page to another page -->
                    <div class="icon">
                        <i class="fa fa-cart-arrow-down" aria-hidden="true"></i><!-- this is cart icon link get form fornt-awesome icon for cart --> 		
                        <i class="fa fa-cart-arrow-down" aria-hidden="true"></i><!-- copy and paste the cart icon link here for hover effect -->		
                    </div>
                    <div class="name"><span data-text="Cart">Cart</span></div>
                    <!-- we are create eight menu item name Cart -->
                </a>
            </li>
            <li>
                <a href="#">
                    <!-- this anchor text for link your Price page to another page -->
                    <div class="icon">
                        <i class="fa fa-usd" aria-hidden="true"></i><!-- this is usd icon link get form fornt-awesome iocn for Price --> 	
                        <i class="fa fa-usd" aria-hidden="true"></i><!-- copy and paste the usd icon link here for hover effect -->		
                    </div>
                    <div class="name"><span data-text="Price">Price</span></div>
                    <!-- we are create nineth menu item name Price -->
                </a>
            </li>
            <li>
                <a href="#">
                    <!-- this anchor text for link your login page to another page -->
                    <div class="icon">
                        <i class="fa fa-sign-in" aria-hidden="true"></i><!-- this is sign in icon link get form fornt-awesome icon for Login --> 		
                        <i class="fa fa-sign-in" aria-hidden="true"></i><!-- copy and paste the sign in  icon link here for hover effect -->		
                    </div>
                    <div class="name"><span data-text="Login">Login</span></div>
                    <!-- we are create tenth menu item name login panel -->
                </a>
            </li>
        </ul>
    </body>
</html>

Step 4.

Next, we will complete our CSS file code to apply style of the HTML and make it more attractive and beautiful.

CSS code:

/* Add a sky blue background color to the body background */
body{
	margin: 0;
	padding: 0;
	font-family: sans-serif;/* we can change font style by using the font-familiy css tag */
	background: aqua;/* you can change the background color of body using background css tag */
}
ul{
	position:absolute;/* set the position of the navigation bar*/
	top: 8%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin: 0;
	padding: 20px 0; /* Adding some padding */
	background: #fff; /* Add a white background color to the top navigation */
	display: flex; /* flex Set navigation bar horizontally using the  display tag*/
	border-radius: 10px; /* add the border radius */
	box-shadow: 0 10px 30px rgba(0,0,0,.3)
}
 /* Style the links inside the navigation bar */
ul li{
	list-style: none;
	text-align: center;
	display: block;
	border-right: 1px solid rgba(0,0,0,0.2);
}
ul li:last-child{
	border-right: none;
}
ul li a{
	text-decoration: none;
	padding: 0 50px;
	display: block;
}
/* Style the icon inside the navigation bar */
ul li a .icon{
	width: 40px; /* changing the width of the icon */
	height: 40px; /* changing the height of the icon */
	text-align: center;
	
	overflow: hidden;
	margin: 0 auto 10px;
	
}
/* set the size, height, width of the icon*/
ul li a .icon .fa{
	width: 100%;
	height: 100%;
	line-height: 40px;
	font-size: 34px;
	transition: 0.5s; /* adding the transition to make it more attractive */
	color: #000;
}

/* Change the color of icon on hover */
ul li a .icon .fa:last-child{
	color: aqua;
}
/* style the color and transform of the icon on hover */
ul li a:hover .icon .fa{
	transform: translateY(-100%); /* translate y to add the hover effect */
}
ul li a .name{
	position: relative;
	height: 20px; 
	width: 100%;
	display: block;
	overflow: hidden;/*make ul li a .name overflow is hidden*/
}
/*style the font size and set transition of the navigation menu*/
ul li a .name span{
	display: block;
	position: relative;
	color: #000;
	font-size: 18px; /* changing font size */
	line-height: 20px;
	transition: 0.5s; /* adding the transition to make it more attractive */
	
}
/*set and change position, top, width, left, height color of the 'class'.name span:before*/
ul li a .name span:before{
	content: attr(data-text);
	position: absolute;
	top: -100%;
	width: 100%;
	left: 0;
	height: 1005;
	color: aqua;
	
}
/*style hover effect of ul li a .name span */
ul li a:hover .name span{
	transform: translateY(20px);
}

Final Output:

Here is how the final output will look.

Stylish navbar with icons in menu option HTML CSS

and on hovering over the navigation bar icons, the color will change:

Stylish navbar with icons in menu option HTML CSS

Live Version:

Here is the live version of the code.

Conclusion:

In just 4 simple steps we have successfully created a navigation bar with icon and hover effect. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.


RELATED POSTS



Subscribe and receive amazing posts directly in your inbox.