How to Add a Logo in the Header Using CSS?

A well-designed website header creates a strong first impression, and adding a logo is an essential part of branding. In this blog, we’ll explore how to place a logo in the header using CSS and position it effectively for a professional look.

1. Basic HTML Structure for the Header

Before styling with CSS, let’s create a simple HTML structure:

<header>
    <div class="logo">
        <img src="logo.png" alt="Company Logo">
    </div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

✅ This structure includes:

• A <header> element
• A <div class="logo"> to hold the logo
• A <nav> for navigation links

2. Styling the Logo with CSS

Now, let’s style the header and logo using CSS.

Method 1: Placing the Logo on the Left

If you want the logo on the left side, use display: flex; for alignment:

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #333;
}

.logo img {
    height: 60px; /* Adjust logo size */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

✅ This positions the logo on the left and aligns the navigation menu on the right.

Method 2: Centering the Logo in the Header

If you want the logo to be centered, modify the CSS like this:

header {
    text-align: center;
    padding: 20px 0;
    background-color: #333;
}

.logo img {
    display: block;
    margin: 0 auto;
    height: 60px;
}

✅ This ensures the logo appears in the center of the header.

Method 3: Placing the Logo Above the Navigation Menu

To position the logo above the navigation links, use flex-direction: column;:

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #333;
}

.logo img {
    height: 70px;
    margin-bottom: 10px;
}

✅ This method is great for mobile-friendly layouts.

Conclusion

Adding a logo in the header using CSS is easy with the right techniques:

✔ Use display: flex; for left-aligned logos.
✔ Use text-align: center; for centered logos.
✔ Use flex-direction: column; to place the logo above the navigation menu.