How To Create A Horizontal Navigation Bar In Html

How to create a Horizontal Navigation Bar in HTML and CSS?

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:

Attention reader! Don't stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.

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: