Create Bootstrap 5 Responsive Navbar for E-Commerce Website

Faraz

By Faraz -

Learn how to create a Bootstrap 5 responsive navbar for your e-commerce website. Follow our easy step-by-step guide to build a user-friendly and mobile-friendly navbar.

Join us on Telegram
create-bootstrap-5-responsive-navbar-for-e-commerce-website.webp
Read Alsocreating-a-shopping-cart-with-html-css-vue-js-and-slick-js.webpCreating a Shopping Cart Concept Using HTML, CSS, Vue, and Slick.js

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

A responsive navigation bar (navbar) is a key element in any e-commerce website. It serves as the central hub for users to access different parts of your site, making it easy for them to find products, learn more about your offerings, and navigate through categories. A well-designed navbar can significantly enhance the user experience by providing quick and intuitive access to all the important sections of your website.

Bootstrap 5, the latest version of the popular front-end framework, offers a streamlined way to create responsive and mobile-friendly navbars. Its built-in classes and components allow you to design a navbar that looks great on any device, from desktops to smartphones. Whether you're building a small online store or a large e-commerce platform, a responsive navbar is essential for keeping users engaged and helping them find what they're looking for with ease.

In this guide, we will walk you through the process of creating a Bootstrap 5 responsive navbar specifically tailored for an e-commerce website. We will cover the basics of setting up your project, building the navbar structure, customizing it to fit the needs of an e-commerce site, and adding custom styles to match your brand. By the end of this tutorial, you'll have a fully functional and attractive navbar that enhances the usability and aesthetics of your website.

Source Code

Step 1 (HTML Code):

The first thing we need to do is create our HTML File for E-Commerce Navbar. We'll start with well-organized markup. After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.

Before we start, ensure you have the latest version of Bootstrap 5. You can either download it or use a CDN (Content Delivery Network).

Here's a breakdown of the main sections of the code:

1. HTML Structure (<!DOCTYPE html>, <html>, <head>, <body> tags)

  • The document starts with <!DOCTYPE html>, which defines the document type and version of HTML (HTML5 in this case).
  • The <html lang="en"> tag declares the language of the document as English.
  • The <head> section includes metadata and external resources like stylesheets.
  • The <body> section contains the visible content of the webpage.

2. Head Section (<head>)

  • Charset: <meta charset="UTF-8"> sets the character encoding to UTF-8, which supports most characters and symbols.
  • Viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0"> ensures the page is responsive, adjusting its layout based on the device's screen size.
  • Title: <title>E-commerce Navbar</title> sets the title of the page, which appears in the browser tab.
  • External Stylesheets:
    • Bootstrap: <link href="https://cdn.jsdelivr.net/..."> includes Bootstrap for responsive design and pre-built CSS components.
    • Google Fonts: <link href="https://fonts.googleapis.com/..."> loads the "Poppins" font.
    • Custom Styles: <link rel="stylesheet" href="styles.css"> links to an external stylesheet named styles.css.

3. Off-canvas Menus (<div class="offcanvas">)

  • Shopping Cart:
    • An off-canvas menu appears from the right side (using Bootstrap's offcanvas-end class) when triggered.
    • It shows the contents of a shopping cart, listing items with their names, brief descriptions, and prices.
    • A "Continue to checkout" button is available for proceeding with the purchase.
  • Search Bar:
    • Another off-canvas menu for search functionality, which allows users to search for products on the website.
    • The search bar includes an input field for entering search queries.

4. Header Section (<header>)

  • Logo and Contact Information:
    • The header contains a logo, phone number, and email address, which are aligned and styled using Bootstrap classes.
  • Search Bar (Large Screens):
    • A search bar is placed in the center of the header for larger screens, allowing users to search for products.
  • Navbar:
    • The main navigation menu includes links to different pages like "Home," "Shop," "Blog," and "Contact."
    • On smaller screens, a hamburger menu (using Bootstrap's navbar-toggler) triggers an off-canvas menu with these navigation links.
    • The navbar also has quick access icons for user profile, wishlist (heart icon), cart, and search, with counters showing the number of items in the cart.

5. Scripts (<script>)

  • Bootstrap Bundle: <script src="https://cdn.jsdelivr.net/..."></script> includes Bootstrap's JavaScript components (like modals and tooltips).
  • Iconify Icons: <script src="https://code.iconify.design/..."></script> loads the Iconify library, used for displaying various icons throughout the navbar.
Read Alsocreate-dice-rolling-game-using-html-css-and-javascript.webpCreate Dice Rolling Game using HTML, CSS, and JavaScript

Step 2 (CSS Code):

Once the HTML structure of the navbar is in place, the next step is to add custom styling to the navbar using CSS.

Here's a breakdown of the main sections of the CSS code:

1. Global Styles

  • body { font-family: 'Poppins', sans-serif; }
    • This sets the font for the entire webpage to "Poppins." If "Poppins" is not available, it will fall back to a generic sans-serif font.

2. Form Control Styles

  • .form-control { text-transform: capitalize; padding: 1rem 0rem 1rem 1rem; }
    • text-transform: capitalize;: Ensures that the first letter of each word in input fields is capitalized.
    • padding: 1rem 0rem 1rem 1rem;: Adds padding inside the input fields, giving space around the content. It applies:
      • 1rem padding at the top and bottom.
      • 0rem padding on the right.
      • 1rem padding on the left.
  • .form-control:focus { outline: 0; box-shadow: none; }
    • outline: 0;: Removes the default outline that appears when an input field is focused (clicked or selected).
    • box-shadow: none;: Prevents any shadow effect when the input field is focused, giving a cleaner look.

3. Link Styles

  • a { color: #333; }
    • This changes the color of all hyperlinks (<a> tags) to a dark gray (#333).

4. Responsive Styles (For Screens 991px and Below)

This section applies only when the screen width is 991 pixels or less (typically tablets and mobile devices).

  • .offcanvas-body .nav-item { font-weight: 700; border-bottom: 1px solid #d1d1d1; }
    • font-weight: 700;: Makes the text inside navigation items bold.
    • border-bottom: 1px solid #d1d1d1;: Adds a light gray border under each navigation item.
  • .offcanvas-body .filter-categories { width: 100%; margin-bottom: 20px !important; border: 1px solid #d1d1d1 !important; padding: 14px; border-radius: 8px; }
    • width: 100%;: Makes the filter categories section take up the full width of its container.
    • margin-bottom: 20px !important;: Adds space below the filter categories, ensuring it's separated from other content. The !important makes sure this rule overrides any other conflicting styles.
    • border: 1px solid #d1d1d1 !important;: Adds a light gray border around the filter categories. The !important ensures this rule is applied.
    • padding: 14px;: Adds 14px of space inside the filter categories box.
    • border-radius: 8px;: Rounds the corners of the filter categories box.
  • .dropdown-menu { padding: 0; border: none; line-height: 1.4; font-size: 0.9em; }
    • padding: 0;: Removes the padding inside dropdown menus.
    • border: none;: Removes any border around dropdown menus.
    • line-height: 1.4;: Sets the space between lines of text inside dropdown menus to 1.4 times the font size.
    • font-size: 0.9em;: Reduces the font size inside dropdown menus to 90% of the base font size.
  • .dropdown-menu a { padding-left: 0; }
    • padding-left: 0;: Removes the left padding from links inside dropdown menus, aligning the text closer to the left edge.
  • .dropdown-toggle::after { position: absolute; right: 0; top: 21px; }
    • position: absolute;: Positions the dropdown arrow absolutely within its container.
    • right: 0;: Aligns the dropdown arrow to the right edge of its container.
    • top: 21px;: Vertically positions the dropdown arrow 21px from the top of its container.
  • img { width: 100px; }
    • Sets the width of images to 100px. This ensures that images are small enough to fit on smaller screens.
  body {
    font-family: 'Poppins', sans-serif;
  }
  
  .form-control {
    text-transform: capitalize;
    padding: 1rem 0rem 1rem 1rem;
  }

  .form-control:focus {
    outline: 0;
    box-shadow: none;
  }

  a{
    color: #333;
  }

  @media screen and (max-width: 991px) {

    .offcanvas-body .nav-item {
      font-weight: 700;
      border-bottom: 1px solid #d1d1d1;
    }
  
    .offcanvas-body .filter-categories {
      width: 100%;
      margin-bottom: 20px !important;
      border: 1px solid #d1d1d1 !important;
      padding: 14px;
      border-radius: 8px;
    }
  
    .dropdown-menu {
      padding: 0;
      border: none;
      line-height: 1.4;
      font-size: 0.9em;
    }
  
    .dropdown-menu a {
      padding-left: 0;
    }
  
    .dropdown-toggle::after {
      position: absolute;
      right: 0;
      top: 21px;
    }

    img{
        width: 100px;
    }
  }

Final Output:

create-bootstrap-5-responsive-navbar-for-e-commerce-website.gif
Read AlsoCreating Words, Paragraph, and Character Counter with HTML, CSS, and JavaScript.jpgCreate Word & Character Counter with HTML, CSS, JavaScript (Source Code)

Conclusion:

Creating a responsive navbar for an e-commerce website using Bootstrap 5 is straightforward and effective. By following the steps outlined in this guide, you can build a professional and user-friendly navbar that enhances your website's navigation. Remember to test the navbar across various devices to ensure it performs well everywhere.

A responsive navbar not only improves user experience but also contributes to the overall success of your e-commerce website. So, start building your Bootstrap 5 responsive navbar today and provide your users with a smooth and enjoyable shopping experience!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: create bootstrap 5 responsive navbar for e-commerce website, bootstrap 5 e-commerce navbar tutorial, responsive navbar for e-commerce using bootstrap, step-by-step guide to creating bootstrap 5 navbar, source code, navbar for e commerce website, bootstrap 5 navbar, e-commerce navbar, responsive navbar, bootstrap tutorial
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺