Creating a perfect navbar

To create a perfect navbar with all elements perfectly organized we need to learn it’s structure.

Here we have 3 div elements - div1, div2 and div3

We can see that div2 and div3 are contained by div1.

Understanding “div1” - div1 is a container div which contains div2 and div3. We use CSS property flex inside div1 to saperate div2 and div3, such that div2 resides on the left of the navbar and div3 resides at the right of the navbar.

display: flex;         
justify-content: space-between;     /* GIve space in bertween div2 and div3 */
align-items: center;                /* To align element in center of the div */

Understanding “div2” - div2 has an <img> and <ul> elements arranged in serial order next to each other. Following CSS can be used to achieve that -

display: inline-block;      /* Arranges all elements in a sequences order in a single line */
cursor: pointer;            /* Changes the mouse pointer to a cursor */
:hover:{color:#9CA3AF}    /* Changes colour on mouse hover */

Understanding “div3” - div3 is same as div2 with elements arranged in serial order. But div3 resides at the right side of the navbar. We can add a search bar, dropdown, etc. as we require inside div3.

The complete code -

<div class="nav">
    <div>
        <img class="navitem" width="110" src="/assets/Netflix-logo.png" alt="Netflix Logo">
        <ul class="navitem">Home</ul>
        <ul class="navitem">TV Shows</ul>
        <ul class="navitem">Movies</ul>
        <ul class="navitem">New & Popular</ul>
        <ul class="navitem">My List</ul>
        <ul class="navitem">Browse by Language</ul>
    </div>

    <div>
        <ul class="navitem">Welcome Prashant</ul>
    </div>
</div>

.nav {
    display: flex; 
    justify-content: space-between; 
    align-items: center;

    padding-top: 0.5rem; 
    padding-bottom: 0.5rem; 
    padding-left: 3rem;
    padding-right: 3rem; 

    background: #000000;
}

.navitem {
    display: inline-block; 
    margin: 0.75rem; cursor: 
    pointer; color: white;
}

.navitem:hover {
    color: #9CA3AF; 
}

Alternatively you can use Tailwind CSS to shorten the code length by avoiding writing CSS -

<div class="bg-[#000000] px-12 py-2 flex items-center justify-between">
    <div>
        <img class="inline-block cursor-pointer transition-[1s]" width="110" src="/assets/Netflix-logo.png" alt="Netflix Logo">
        <ul class="inline-block text-[white] cursor-pointer m-3 hover:text-gray-400 transition-[1s]">Home</ul>
        <ul class="inline-block text-[white] cursor-pointer m-3 hover:text-gray-400 transition-[1s]">TV Shows</ul>
        <ul class="inline-block text-[white] cursor-pointer m-3 hover:text-gray-400 transition-[1s]">Movies</ul>
        <ul class="inline-block text-[white] cursor-pointer m-3 hover:text-gray-400 transition-[1s]">New & Popular</ul>
        <ul class="inline-block text-[white] cursor-pointer m-3 hover:text-gray-400 transition-[1s]">My List</ul>
        <ul class="inline-block text-[white] cursor-pointer m-3 hover:text-gray-400 transition-[1s]">Browse by Language</ul>
    </div>

    <div>
        <ul class="inline-block text-[white] cursor-pointer">Welcome Prashant</ul>
    </div>
</div>