Youtube Inspired Navbar

Embrace the sleekness of YouTube's navbar design on your website effortlessly. Learn how to replicate YouTube's navbar to enhance your site's appearance and user experience.

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=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<nav class="navbar">
  <button class="burger material-symbols-outlined">menu</button>

  <div class="logo">
    <img src="https://raw.githubusercontent.com/frontend-joe/css-navbars/d296e62eb289784b7ffa22dedc5da7a9c8f471dc/navbar-7/logo.svg" />
  </div>
  <div class="center">
    <div class="search">
      <input
        spellcheck="false"
        type="text"
        class="search"
        id="search"
        placeholder="Search"
      />
      <button class="material-symbols-outlined">search</button>
    </div>
    <button class="material-symbols-outlined">mic</button>
  </div>
  <nav>
    <button class="material-symbols-outlined">search</button>
    <button class="material-symbols-outlined">mic</button>
    <button class="material-symbols-outlined">video_call</button>
    <button class="material-symbols-outlined">
      <span class="badge">9+</span>notifications
    </button>
    <img src="https://www.frontendcomponent.com/favicon.ico" />
  </nav>
</nav>

* {
  box-sizing: border-box;
}

body {
  background: #202124;
  font-family: Roboto;
}

button {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 72px;
  border: 0;
  padding: 0;
  font-family: inherit;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}

.badge {
  position: absolute;
  top: 20px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 12px;
  border-radius: 6px;
  background: red;
  font-size: 8px;
  font-weight: 500;
  font-family: Roboto;
}

.burger {
  width: 72px;
}

.navbar {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #0f0f0f;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 88px;
  padding-right: 10px;
}

@media (width >= 500px) {
  .logo {
    margin-bottom: 0;
  }
}

.logo img {
  height: 20px;
}

.center {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  color: #888989;
}

.center button {
  display: none;
  background: #1e1e1e;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
}

@media (width >= 500px) {
  .center button {
    display: block;
  }
}

.search {
  position: relative;
  display: none;
}

@media (width >= 500px) {
  .search {
    display: block;
  }
}

.search button {
  position: absolute;
  top: 50%;
  right: 1px;
  translate: 0 -50%;
  z-index: 1;
  font-size: 20px;
  width: 60px;
  height: 42px;
  border-radius: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background: #222222;
}

.search input {
  flex: 1 1 auto;
  height: 44px;
  width: 25vw;
  padding-left: 16px;
  padding-right: 60px;
  font-size: 16px;
  border: 1px solid #303030;
  border-radius: 22px;
  background: #121212;
  color: inherit;
  font-family: inherit;
  font-weight: 400;
  outline: none;
}

@media (width >= 650px) {
  .search input {
    width: 240px;
  }
}

.navbar nav {
  display: flex;
  align-items: center;
  padding-right: 20px;
}

.navbar nav img {
  flex: 0 32px;
  width: 32px;
  height: 32px;
  margin-left: 8px;
}

@media (width >= 500px) {
  .navbar nav button:is(:nth-child(1), :nth-child(2)) {
    display: none;
  }
}

@media (width < 400px) {
  .navbar nav button:is(:nth-child(2), :nth-child(4)) {
    display: none;
  }
}

```
No need of JavaScript
```

Building a navigation bar inspired by YouTube's clean and functional design can greatly enhance the user experience of your website. This guide will walk you through the process of implementing a YouTube-inspired navbar using HTML and CSS. You'll learn how to copy the provided code snippet, link the necessary CSS files, and customize the navbar to fit your specific requirements.

Step 1: Copy the Code Snippet

Start by copying the provided HTML and CSS code snippet. This snippet includes the foundational structure and styles needed for the YouTube-inspired navbar. Simply select the code, click the copy button, and paste it into your HTML and CSS files.

Step 2: Link CSS Files

Ensure that the necessary CSS files are correctly linked in your HTML document. Add the following <link> tags in the <head> section to import the CSS styles and the Material Icons:

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

Step 3: Customize and Make it Yours

Personalize the navbar to match your website's aesthetics and functionality requirements. Adjust the CSS styles to modify the navbar's appearance, behavior, and interactivity. Experiment with different colors, font sizes, and icons to create a seamless and engaging user experience.

By following these steps, you can implement and customize a YouTube-inspired navbar on your website using HTML and CSS. Make the navbar your own by tweaking styles and functionalities to create a seamless and visually appealing interaction that enhances user engagement and usability.

Code Explanation

HTML Code

Navigation Bar Container (<nav class="navbar">):

The main container for the navigation bar elements.

Menu Button (<button class="burger material-symbols-outlined">menu</button>):

A button with the class burger and material-symbols-outlined which likely applies some specific styling and icon fonts. The text menu inside the button indicates it's a menu button.

Logo Container (<div class="logo">):

Contains an image element <img> that displays the logo of the site or application.
The src attribute points to the URL of the logo image.

Center Container (<div class="center">):

This section includes a search bar and a microphone button.
Search Bar Container (<div class="search">):
- Contains an input field for text search with spell check disabled.
- Placeholder text "Search" is provided.
- A button with a search icon is placed next to the input field.
Microphone Button (<button class="material-symbols-outlined">mic</button>):
- A button with the material-symbols-outlined class indicating it uses an icon font for the microphone icon.

Nested Navigation Container (<nav>):

Contains multiple buttons and an image for additional navigation options.
Search Button (<button class="material-symbols-outlined">search</button>):
- A button with a search icon.
Microphone Button (<button class="material-symbols-outlined">mic</button>):
- Another button with a microphone icon.
Video Call Button (<button class="material-symbols-outlined">video_call</button>):
- A button with a video call icon.
Notifications Button (<button class="material-symbols-outlined">notifications</button>):
- A button with a notifications icon.
- Contains a <span class="badge">9+</span> which likely shows the number of notifications.
Profile Image (<img src="https://www.frontendcomponent.com/favicon.ico" />):
- An image, possibly a user profile or avatar, sourced from a specified URL.

CSS Code

General Rules

Universal Selector (* { box-sizing: border-box; }):

Ensures that the box-sizing property is set to border-box for all elements, which includes padding and border in the element's total width and height.

Body Styling

Body (body):

Sets the background color to a dark shade #202124.
Sets the font family to Roboto.

Button Styling

Button (button):

Sets the position to relative, useful for positioning child elements (like the badge).
Uses display: grid and place-items: center for centering content within the button.
Sets a fixed width (40px) and height (72px).
Removes default border and padding.
Inherits the font family from its parent.
Makes the background transparent and sets the text color to white (#ffffff).
Changes the cursor to a pointer on hover.

Badge (.badge):

Positions the badge absolutely within the parent button, placing it at the top right.
Uses display: grid and place-items: center for centering the text within the badge.
Sets a fixed width (16px) and height (12px).
Rounds the corners with border-radius: 6px.
Sets the background to red and the text color to white.
Sets a small font size (8px) and bold font weight (500).
Uses the Roboto font family.
Specific Button Styling
Burger Button (.burger):
Sets a fixed width (72px).

Navbar Styling

Navbar (.navbar):

Fixes the navbar to the top of the viewport with position: fixed.
Sets a high z-index to ensure it appears above other elements.
Stretches the navbar to the full width and sets a fixed height (72px).
Uses flexbox to align items center and justify content to the end.
Sets a dark background color (#0f0f0f).

Logo Styling

Logo Container (.logo):

Uses flexbox to align items center and adds a gap between elements.
Sets a fixed width (88px) and adds right padding.
Media Query (min-width: 500px):
- Removes bottom margin.

Logo Image (.logo img):

Sets a fixed height (20px).

Center Section Styling

Center Container (.center):

Uses flexbox to align items center and adds a gap between elements.
Centers itself with margin auto and sets a text color (#888989).
Center Buttons:
- Hidden by default.
- Uses background: #1e1e1e and a fixed height (40px).
- Rounds the button to a circle.
- Sets font size (20px).
Media Query (min-width: 500px):
- Displays the buttons.

Search Section Styling

Search Container (.search):

Position relative and hidden by default.
Media Query (min-width: 500px):
Displays the search container.
Search Button:
- Positions the button absolutely within the search container.
- Centers vertically within the parent with translate.
- Sets a z-index to ensure it appears above the input.
- Sets fixed dimensions and border radius for styling.
- Uses a dark background (#222222).
Search Input:
- Uses flexbox for layout and sets a minimum width.
- Adds padding and a border with rounded corners.
- Uses a dark background (#121212) and the inherited text color.
- Inherits the font family and sets a fixed font weight (400).
Media Query (min-width: 650px):
- Sets a fixed width (240px).

Navbar Nested Navigation

Nested Navigation (.navbar nav):

Uses flexbox to align items center.
Adds padding to the right.

Nested Navigation Image (.navbar nav img):

Uses flex properties and sets fixed dimensions for the image.
Adds a left margin.

Responsive Design

Media Query (min-width: 500px):

Hides the first and second child buttons within the nested navigation.

Media Query (max-width: 400px):

Hides the second and fourth child buttons within the nested navigation.