CSS Navigation Bar

CSS Navigation Bar


CSS Navigation Bar 
A navigation bar is usually a list of links, so using the <ul> and <li> elements can help in obtaining it.
Navigation bar is important for any website.
Without that, a website can not survive.
We need HTML as the base to create any kind of navigation bar.
We can also import navigation bars from other sources on the internet like bootstrap etc.
Now we can use the <nav> tag to create a navigation bar.
Now we will see Example - 
Example - 
<header>
        <nav class="navbar">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact us</a></li>
                <div class="search">
                    <input type="text" name="search" id="search" placeholder="Search this website">
                </div>
            </ul>
        </nav>
    </header>
Output  -
We can create navigation bar in two ways mentioned down below - 
1. Vertical Navigation bar
2. Horizontal navigation bar