DEV Community

Cover image for Navbar Components using HTML CSS
Ganesh Patil
Ganesh Patil

Posted on

3 3

Navbar Components using HTML CSS

Navigation bar is most important component of your website because it is the center attraction when anyone visit to your website so its important to look attractive.
Here is following code for Navbar in website

HTML Code

<header>
            <nav>
                <div class="ig">
                    <a href="https://github.com/ganeshpatil386386" target="_blank" id="git">
                    <img src="./assets/Logo.png" id="lg" alt="" srcset="">
                    <p style="text-align:left;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">ganeshpatil386386</p>
                </a>
                </div>
                <input type="text" name="" id="search-box" placeholder="Explore Projects">
                <ul>
                    <li><a href="#first">Website Dev</a></li>
                    <li><a href="#second">Software Dev</a></li>
                    <li><a href="#Third">Mobile Dev</a></li>

                </ul>
            </nav>
        </header>
Enter fullscreen mode Exit fullscreen mode

CSS Code

Now we need to add interaction and attractive part with CSS to our website component I developed website for GitHub repo showcase you can visit and check on my GitHub profile.

{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    background-color: #F05454;
}
header{
    position: fixed;
}
nav{
    display: flex;

}
#lg{
    height: 80px;
    align-items: center;

}
.ig{
    margin: 10px;
}
#git{
    text-decoration: none;


}
#search-box{
    width: 25rem;
    height: 2rem;
    border: none;
    border-radius: 6px;
    padding-left: 5px;
    box-shadow: 2px 2px 1px 2px #fff;
    margin: 30px;
    display: flex;

}
nav ul{
    display: flex;
    list-style: none;
    margin: 33px;
}
nav a{
    text-decoration: none;
    padding: 6px 10px;
    font-size: 17px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

}
nav a:hover{
    border-bottom: 2px solid black;
    transform: 0.5px ease;
}
Enter fullscreen mode Exit fullscreen mode

This is simple navigation bar component for our website so its no need JS for completed code visit my GitHub profile and check it out...!!
GitHub project Link
don't forget hit like button and follow me GitHub for web development projects.
also conn with me Twitter
Thankyou for reading express your views in comment section...!!

Image of Wix Studio

2025: Your year to build apps that sell

Dive into hands-on resources and actionable strategies designed to help you build and sell apps on the Wix App Market.

Get started

Top comments (0)

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay