Blurred Background Navbar with Search

Elevate your website's aesthetics with a sleek navbar featuring a blurred background and search functionality.

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

<div class="background"></div>
    <nav class="navbar">
      <img class="navbar-logo" src="https://raw.githubusercontent.com/frontend-joe/css-navbars/main/navbar-3/assets/logo.png" />
      <input type="text" placeholder="Search" class="navbar-search" />
    </nav>
    <button class="navbar-burger" onclick="toggleMenu()"></button>
    <nav class="menu">
      <a href="#" style="animation-delay: 0.1s">Home</a>
      <a href="#" style="animation-delay: 0.2s">About</a>
      <a href="#" style="animation-delay: 0.3s">Services</a>
      <a href="#" style="animation-delay: 0.4s">Products</a>
      <a href="#" style="animation-delay: 0.5s">Contact</a>
    </nav>

* {
  box-sizing: border-box;
}

button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.navbar,
.navbar-burger,
.menu,
.background {
  position: fixed;
}

.background {
  z-index: 1;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-navbars/main/navbar-3/assets/bg.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.5s;
}

body.open .background {
  filter: blur(20px);
}

.navbar {
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 72px;
  padding-left: 20px;
  padding-right: 72px;
  background: #19191c;
  color: #f9f9f9;
}

.navbar > button {
  font-size: 28px;
}

.navbar-logo {
  height: 25px;
}

.navbar-burger {
  z-index: 3;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-navbars/main/navbar-3/assets/menu.svg");
  background-repeat: no-repeat;
  background-position: center;
}

body.open .navbar-burger {
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-navbars/main/navbar-3/assets/close.svg");
}

.navbar-search {
  border: 0;
  height: 40px;
  background: #2f3339 url("https://raw.githubusercontent.com/frontend-joe/css-navbars/main/navbar-3/assets/search.svg");
  background-repeat: no-repeat;
  background-position: 10px 50%;
  border: 0;
  border-radius: 6px;
  padding-left: 36px;
  width: 180px;
  font-size: 16px;
  font-family: "Poppins";
}

.navbar-search::placeholder {
  color: #a7a7a7;
}

.menu {
  z-index: 2;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}

body.open .menu {
  opacity: 1;
  visibility: visible;
}

.menu > a {
  color: #f9f9f9;
  font-size: 32px;
  font-family: "Poppins";
  text-decoration: none;
}

body.open .menu > a {
  animation: appear 0.3s both;
}

@keyframes appear {
  0% {
    opacity: 0;
    translate: 0 50px;
  }
  100% {
    opacity: 1;
  }
}

const toggleMenu = () => {
    document.body.classList.toggle("open");
};

Create a stylish blurred background navbar with search functionality for your website using HTML, CSS, and JavaScript. This comprehensive guide will walk you through the process of integrating and customizing a navbar that features a visually appealing background blur effect and interactive search functionality.

Step 1: Copy the Code Snippet

Start by copying the provided HTML, CSS, and JavaScript code snippet for the blurred background navbar with search. This snippet includes the foundational structure, styles, and basic functionality needed to create a navbar with a blurred background and search input. Select the code, click the copy button, and paste it into your HTML file where you want the navbar to appear.

Step 2: Link CSS, Material Icons, and JavaScript Files

Ensure the necessary CSS, Material Icons, and JavaScript files are linked correctly in your HTML document. Add the following <link> tags in the <head> section to import the CSS styles and Material Icons:
```
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```
Include the following <script> tag at the end of your <body> section to import the JavaScript file:
```
<script src="script.js"></script>
```
Replace "styles.css" and "script.js" with the actual file names where you have saved your CSS and JavaScript code.

Step 3: Customize and Make it Yours

Personalize the navbar with a blurred background and search functionality to match your website's aesthetics and functionality requirements. Adjust the CSS styles and JavaScript code to modify the navbar's appearance, search input behavior, and interaction features. Experiment with different background blur effects, styles, and responsive design techniques to create a unique and engaging navigation experience.

By following these steps, you can implement and customize a blurred background navbar with search on your website using HTML, CSS, and JavaScript. Make the navbar component your own by adjusting styles, adding custom icons, and enhancing the search functionality to create a visually appealing and user-friendly navigation experience.

Code Explanation

HTML Code

Background Element

<div class="background"></div>

A div with the class background is used for styling purposes, such as setting a background image or color for the webpage.

Navigation Bar

<nav class="navbar">
  <img class="navbar-logo" src="https://raw.githubusercontent.com/frontend-joe/css-navbars/main/navbar-3/assets/logo.png" />
  <input type="text" placeholder="Search" class="navbar-search" />
</nav>

<nav class="navbar">: Defines a navigation bar.
<img class="navbar-logo" src="...">: An image element with the class navbar-logo displaying a logo. The src attribute points to an external image URL.
<input type="text" placeholder="Search" class="navbar-search" />: A text input field with the class navbar-search for search functionality. The placeholder attribute displays the text "Search" inside the input field when it is empty.

Burger Button

<button class="navbar-burger" onclick="toggleMenu()"></button>

<button class="navbar-burger" onclick="toggleMenu()"></button>: A button with the class navbar-burger. The onclick attribute calls a JavaScript function toggleMenu() when the button is clicked. This is typically used to toggle the visibility of the menu in mobile view.

Side Menu

<nav class="menu">
  <a href="#" style="animation-delay: 0.1s">Home</a>
  <a href="#" style="animation-delay: 0.2s">About</a>
  <a href="#" style="animation-delay: 0.3s">Services</a>
  <a href="#" style="animation-delay: 0.4s">Products</a>
  <a href="#" style="animation-delay: 0.5s">Contact</a>
</nav>

<nav class="menu">: Defines a side menu.
<a href="#" style="animation-delay: 0.1s">Home</a> to <a href="#" style="animation-delay: 0.5s">Contact</a>: These are anchor (<a>) elements, each representing a menu item. The href="#" attribute is a placeholder that would normally link to different sections or pages.
style="animation-delay: 0.1s": Inline style that sets an animation delay for each menu item. This is typically used for staggered animation effects, so each menu item appears in sequence when the menu is displayed.

CSS Code

Universal Box Sizing

* {
  box-sizing: border-box;
}

Ensures that padding and border are included in the element's total width and height for all elements.

Button Reset

button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

Resets button styles to remove borders, padding, and background.
Changes the cursor to a pointer when hovering over buttons.

Fixed Positioning for Elements

.navbar,
.navbar-burger,
.menu,
.background {
  position: fixed;
}

Sets fixed positioning for the .navbar, .navbar-burger, .menu, and .background elements.

Background Styling

.background {
  z-index: 1;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-navbars/main/navbar-3/assets/bg.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.5s;
}

body.open .background {
  filter: blur(20px);
}

Sets the background image and its positioning, covering the entire element without repeating.
Applies a blur effect to the background image when the body has the class open.

Navbar Styling

.navbar {
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 72px;
  padding-left: 20px;
  padding-right: 72px;
  background: #19191c;
  color: #f9f9f9;
}

.navbar > button {
  font-size: 28px;
}

.navbar-logo {
  height: 25px;
}

Styles the navigation bar (.navbar) with a dark background, light text, and full width.
Uses flexbox to center items and space them evenly.
Adds padding to the left and right sides.
Styles the buttons inside the navbar with a larger font size.
Sets the height of the logo image.

Burger Button Styling

.navbar-burger {
  z-index: 3;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-navbars/main/navbar-3/assets/menu.svg");
  background-repeat: no-repeat;
  background-position: center;
}

body.open .navbar-burger {
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-navbars/main/navbar-3/assets/close.svg");
}

Positions the burger button at the top right corner.
Centers its content using CSS grid.
Sets its background image to a menu icon by default and changes it to a close icon when the body has the class open.

Search Input Styling

.navbar-search {
  border: 0;
  height: 40px;
  background: #2f3339 url("https://raw.githubusercontent.com/frontend-joe/css-navbars/main/navbar-3/assets/search.svg");
  background-repeat: no-repeat;
  background-position: 10px 50%;
  border-radius: 6px;
  padding-left: 36px;
  width: 180px;
  font-size: 16px;
  font-family: "Poppins";
}

.navbar-search::placeholder {
  color: #a7a7a7;
}

Styles the search input with a dark background and a search icon positioned inside.
Adds padding to the left to accommodate the icon.
Sets the font and placeholder color.

Menu Styling

.menu {
  z-index: 2;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}

body.open .menu {
  opacity: 1;
  visibility: visible;
}

Positions the menu to cover the entire screen.
Uses flexbox to center the menu items vertically and horizontally.
Initially hides the menu with zero opacity and hidden visibility.
Makes the menu visible and fully opaque when the body has the class open.

Menu Links Styling

.menu > a {
  color: #f9f9f9;
  font-size: 32px;
  font-family: "Poppins";
  text-decoration: none;
}
body.open .menu > a {
  animation: appear 0.3s both;
}
@keyframes appear {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

Styles the links inside the menu with light text, large font size, and no underline.
Adds an animation to make the links appear with a fade-in and slide-up effect when the menu becomes visible.
Defines the keyframes for the appear animation.

JavaScript Code

Function Declaration:

const toggleMenu = () => {

const toggleMenu: Declares a constant named toggleMenu, which is a function.
() => { ... }: Defines the function using arrow function syntax.

Function Body:

document.body.classList.toggle("open");

document.body: Refers to the <body> element of the HTML document.
classList: Provides access to the list of classes of the <body> element.
toggle("open"): Toggles the presence of the class "open" on the <body> element.