Facebook Inspired Navbar

Emulate the navigation experience of Facebook with a Facebook-inspired navbar on your website. Learn how to recreate Facebook's navbar design to enhance user experience and streamline navigation.

Implementing a navbar inspired by Facebook's design can add a familiar and user-friendly element to your website. This guide will help you create a Facebook-inspired navbar using HTML and CSS. Follow these steps to copy the provided code snippet, link the required CSS files, and personalize the navbar to fit your specific requirements.

Step 1: Copy the Code Snippet

  • Begin by copying the provided HTML and CSS code snippet below. This snippet contains the essential structure and styles for the Facebook-inspired navbar. Simply select the code, copy it, and paste it into your HTML and CSS files.

Step 2: Link CSS Files

  • Ensure the necessary CSS files are properly linked in your HTML document. Add the following <link> tags within the <head> section to import the CSS styles and the necessary icons: 
    <link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

Step 3: Customize and Make it Yours

  • Personalize the navbar to match your website's branding and functionality. Adjust the CSS styles to modify the navbar's appearance, colors, and icons. Experiment with different fonts and sizes to create a navigation bar that seamlessly integrates with your website's design.

By following these steps, you can implement and customize a Facebook-inspired navbar using HTML and CSS. Tailor the navbar to your specific needs and enhance user navigation and engagement on your website.

Code Explanation

HTML Code

.navbar-badge:

  • Represents a badge (<span class="navbar-badge">20+</span>) indicating there are more than 20 notifications or messages.

.navbar-end Sections:

  • Logo and Search Button:
    • Contains a logo (<svg class="navbar-logo">) which is styled with specific dimensions and colors (fill="#1877F2" for Facebook's blue).
    • An icon button (<button class="icon-button">) with a search icon (<i class="uil uil-search"></i>).
  • Right Side Icons:
    • Several buttons (<button class="icon-button">) with icons representing various functionalities (like adding content, messaging, notifications).
    • An avatar (<img class="navbar-avatar">) displayed as an image.

.navbar-center Section:

  • Contains a row of buttons each with an icon (<i> tags with classes like uil-estate, uil-play-circle, etc.). These likely represent different sections or features of the application.

CSS Code

Global Styles
* {
  box-sizing: border-box;
}
html,
body,
.wrapper {
  height: 100%;
}
body {
  margin: 0;
  background: #f0f2f5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont;
}
  • * { box-sizing: border-box; }: Applies box-sizing: border-box; globally, ensuring padding and border are included in the element's total width and height.
  • Sets html, body, and .wrapper to take up 100% of the viewport height (height: 100%;).
  • Resets margin on body (margin: 0;) and applies a background color (background: #f0f2f5;). The font family is set to a system font stack for consistency (font-family: system-ui, -apple-system, BlinkMacSystemFont;).
Button Styles
button {
  display: grid;
  place-items: center;
  background: transparent;
  color: #606770;
  border: 0;
}

button > i {
  font-size: 20px;
}
  • Styles all <button> elements to center their content (display: grid; place-items: center;), have a transparent background (background: transparent;), and set text color (color: #606770;).
  • Removes the default border (border: 0;) and sets the font size for <i> elements inside buttons (button > i { font-size: 20px; }).
Navbar Styles
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  width: 100%;
  padding: 0 20px;
  border-bottom: 1px solid #e8e8e8;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
  • Styles the .navbar element:
  • Fixed positioning at the top of the viewport (position: fixed; top: 0; left: 0;).
  • Uses flexbox to align items (display: flex; align-items: center; justify-content: space-between;).
  • Sets height, width, padding, border bottom, background, and adds a subtle box shadow for elevation (height: 72px; width: 100%; padding: 0 20px; border-bottom: 1px solid #e8e8e8; background: #ffffff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);).
Component Specific Styles
.navbar-logo,
.navbar-avatar {
  width: 40px;
  height: 40px;
}
.navbar-end {
  display: flex;
  gap: 6px;
  flex: 0 0 178px;
}
.icon-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f2f5;
}
.navbar-badge {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 54px;
  background: #e41e3f;
  color: #f9f9f9;
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 10px;
  transition: 0.3s;
}
.navbar-center {
  display: flex;
  flex: 1 1 auto;
  padding: 0 10px;
}
.navbar-center > button {
  flex: 1 1 auto;
  height: 72px;
  padding-top: 4px;
  border-bottom: 4px solid transparent;
}
.navbar-center > button.active {
  border-bottom-color: #1a74e5;
}
.navbar-center > button.active > i {
  color: #1a74e5;
}
.navbar .navbar-end:last-child > button > i {
  color: #050505;
}
  • .navbar-logo and .navbar-avatar: Sets dimensions for logo and avatar images.
  • .navbar-end: Styles for the right-aligned section of the navbar.
  • .icon-button: Styles for buttons with icons.
  • .navbar-badge: Styles for notification badge.
  • .navbar-center: Styles for the center-aligned section of the navbar.
  • Media Queries (@media):
    • Adjusts layout for smaller screens (@media (width <= 600px)) by modifying .navbar-end and hiding some buttons.
    • Further adjusts for very small screens (@media (width <= 400px)) by hiding additional buttons and adjusting badge position.