Building a Responsive Flexbox Header with Logo, Navigation, and Search Bar

Creating a responsive header for your website is essential for providing a good user experience. Using CSS Flexbox, you can easily design a header that adapts to different screen sizes while maintaining a clean layout. In this article, we’ll walk through building a header that includes a logo, navigation menu, and search bar.

Designing the Flexbox Header

The header will be a flex container with three main parts: the logo on the left, the navigation menu in the center, and the search bar on the right. We’ll ensure it is responsive so that on smaller screens, the layout adjusts smoothly.

HTML Structure

Here’s the basic HTML structure for our header:

<header class="site-header">
  <div class="logo">Your Logo</div>
  <nav class="navigation">
    <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>
  <div class="search-bar">
    <input type="text" placeholder="Search...">
  </div>
</header>

CSS Styling

Apply the following CSS to make the header responsive and styled with Flexbox:

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

/* Header Styles */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
}

/* Logo */
.logo {
  font-size: 1.5em;
  font-weight: bold;
}

/* Navigation */
.navigation ul {
  list-style: none;
  display: flex;
  gap: 15px;
}

.navigation a {
  color: #fff;
  text-decoration: none;
  padding: 5px 10px;
}

.navigation a:hover {
  background-color: #555;
  border-radius: 4px;
}

/* Search Bar */
.search-bar input {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .navigation ul {
    flex-direction: column;
    width: 100%;
  }

  .navigation li {
    width: 100%;
  }

  .search-bar {
    width: 100%;
    margin-top: 10px;
  }

  .search-bar input {
    width: 100%;
  }
}

Implementing the Header

Insert the HTML code into your website’s header template or within a Custom HTML block in WordPress. Then, add the CSS styles to your stylesheet or within a style block in your theme.

Final Tips

Test your header on different devices to ensure responsiveness. Adjust the CSS as needed to match your branding and layout preferences. Flexbox makes it straightforward to create adaptable, modern headers that enhance your website’s usability.