Website Navbar

📘 Navbar Kya Hai?

Hindi: Navbar website ka wo section hota hai jahan important pages ke links diye jaate hain. Jaise Home, About, Services, Projects aur Contact.

English: A navbar is a navigation section that helps users move between different pages of a website.

💡 Navbar Kyu Use Karte Hain?

Navbar ki help se user easily:

• Home page par ja sakta hai
• About page open kar sakta hai
• Services dekh sakta hai
• Projects dekh sakta hai
• Contact page par ja sakta hai

1️⃣ Basic Navbar

Sabse pehle ek simple HTML navbar banate hain.

<nav>

    <a href="index.html">Home</a>

    <a href="about.html">About</a>

    <a href="services.html">Services</a>

    <a href="contact.html">Contact</a>

</nav>

2️⃣ Navbar Mein Logo

Professional website mein navbar ke left side par usually logo ya website name hota hai.

<nav class="navbar">

    <a href="index.html" class="logo">
        OMI
    </a>

    <div class="nav-links">

        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="services.html">Services</a>
        <a href="contact.html">Contact</a>

    </div>

</nav>

3️⃣ Flexbox Se Navbar

Navbar ke logo aur links ko properly arrange karne ke liye Flexbox ka use kar sakte hain.

.navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 7%;
}

.nav-links{
    display:flex;
    gap:25px;
}

4️⃣ Navbar Styling

Navbar ko professional look dene ke liye background, color aur spacing add kar sakte hain.

.navbar{
    background:#07111f;
    padding:18px 7%;
}

.nav-links a{
    color:white;
    text-decoration:none;
}

.logo{
    color:#00d9ff;
    font-size:22px;
    font-weight:bold;
}

5️⃣ Navbar Hover Effect

Mouse link ke upar aane par color change karne ke liye :hover use kar sakte hain.

.nav-links a{
    color:white;
    text-decoration:none;
    transition:.3s;
}

.nav-links a:hover{
    color:#00d9ff;
}

6️⃣ Active Navigation Link

Current page ko highlight karne ke liye active class use ki ja sakti hai.

<a href="index.html"
class="active">
    Home
</a>

.nav-links a.active{
    color:#00d9ff;
}

💻 Complete Professional Navbar

Ab HTML aur CSS ko combine karke ek complete professional navbar banate hain.

<!DOCTYPE html>

<html>

<head>

<style>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.navbar{
    background:#07111f;
    padding:18px 7%;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    color:#00d9ff;
    text-decoration:none;
    font-size:22px;
    font-weight:bold;
}

.nav-links{
    display:flex;
    gap:25px;
}

.nav-links a{
    color:white;
    text-decoration:none;
    transition:.3s;
}

.nav-links a:hover{
    color:#00d9ff;
}

</style>

</head>

<body>

<nav class="navbar">

    <a href="index.html"
    class="logo">
        OMI
    </a>

    <div class="nav-links">

        <a href="index.html">
            Home
        </a>

        <a href="about.html">
            About
        </a>

        <a href="services.html">
            Services
        </a>

        <a href="projects.html">
            Projects
        </a>

        <a href="contact.html">
            Contact
        </a>

    </div>

</nav>

</body>

</html>

📱 Responsive Navbar

Mobile screen par navbar ke links ko vertical layout mein arrange karne ke liye media query use kar sakte hain.

@media(max-width:600px){

    .navbar{
        flex-direction:column;
        gap:15px;
    }

    .nav-links{
        flex-direction:column;
        text-align:center;
        gap:12px;
    }

}

🌐 Real Website Mein Navbar

Almost har professional website mein navbar hota hai. Isme logo, navigation links aur kabhi-kabhi login, signup ya contact button bhi hota hai.

⚠️ Important Note