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 Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video