In this article, we will try to create a navigation bar horizontally. To understand this article, we need to know some basics of HTML and CSS.
Approach:
- We will create the structure of the navigation bar which will later be displayed horizontally.
- The tags that we will use for this is <nav> tag and <ul> tag. Here nav tag will be acting as a container for the list of items that will be used for navigation. Ul will also be used to list the number of items that the user will navigate.
- Now we have the structure of the navigation bar. So we will apply CSS properties like flex to make the navigation bar appeared horizontal.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Horizontal Navigation Bar
</title>
</head>
<body>
<nav class="navbar background">
<ul class="nav-list">
<li><a href="#Car">Car</a></li>
<li><a href="#file">file</a></li>
</ul>
<div class="rightNav">
<input type="text" name="search" id="search" />
<button class="btn btn-sm">Search</button>
</div>
</nav>
</body>
</html>
|
The output of the code:
Now we have the structure of the table. So we will design the navigation bar, and we will use property like flex to make the navigation bar appear horizontal.
CSS
* {
/* Here we set the margin and padding 0 */
margin: 0;
padding: 0;
}
.navbar {
display: flex;
/* This is used to make the navbar sticky, So that the
navbar stays at the top part even if we scroll */
position: sticky;
align-items: center;
justify-content: center;
top: 0px;
/*it specifies the mouse cursor to be displayed
when it is pointed over the element */
cursor: pointer;
}
.nav-list {
width: 50%;
display: flex;
}
.nav-list li {
list-style: none;
padding: 26px 30px;
}
.nav-list li a {
text-decoration: none;
color: white;
}
.nav-list li a:hover {
color: black;
}
.rightNav {
width: 50%;
text-align: right;
}
#search {
padding: 5px;
font-size: 17px;
border: 2px solid grey;
border-radius: 9px;
}
.background {
background: rgba(0, 0, 0, 0.4) url(
background-blend-mode: darken;
background-size: cover;
}
|
Final Code: This is the combination of all the above codes –
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Horizontal Navigation Bar
</title>
<style>
* {
/* Here i made the margin and padding 0 */
margin: 0;
padding: 0;
}
.navbar {
display: flex;
/* This is used to make the navbar sticky, So that the
navbar stays at the top part even if we scroll */
position: sticky;
align-items: center;
justify-content: center;
top: 0px;
/*it specifies the mouse cursor to be displayed
when it is pointed over the element */
cursor: pointer;
}
.nav-list {
width: 50%;
display: flex;
}
.nav-list li {
list-style: none;
padding: 26px 30px;
}
.nav-list li a {
text-decoration: none;
color: white;
}
.nav-list li a:hover {
color: black;
}
.rightNav {
width: 50%;
text-align: right;
}
#search {
padding: 5px;
font-size: 17px;
border: 2px solid grey;
border-radius: 9px;
}
.background {
background: rgba(0, 0, 0, 0.4) url(
background-blend-mode: darken;
background-size: cover;
}
</style>
</head>
<body>
<nav class="navbar background">
<ul class="nav-list">
<li><a href="#Car">Car</a></li>
<li><a href="#file">file</a></li>
</ul>
<div class="rightNav">
<input type="text" name="search" id="search" />
<button class="btn btn-sm">Search</button>
</div>
</nav>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
30 Dec, 2020
Like Article
Save Article