DEV Community: Kibet ArapKoech

How to build a carousel using Bootstrap

Kibet ArapKoech — Tue, 15 Apr 2025 18:47:07 +0000

Here we shall build a carousel using bootstrap. For the full code: https://github.com/BryanArapKoech/A-carousel.
This is what the carousel should finally look like:

There are 5 images in the carousel. We want the carousel to autoscroll every 5 seconds so we shall implement that using javascript.
We start by the general structure. We wrap all the carousel section inside "carousel-container". We wrap all the code inside the "carousel-container" inside a div with id="portfCarousel" class="carousel slide" data-bs-ride="carousel". id="portfCarousel" is a Unique ID for the entire carousel component. The class="carousel slide" is a bootstrap classes that enables carousel functionality. The data-bs-ride="carousel" tells Bootstrap to automatically start cycling the carousel on page load.

<!-- Carousel Section -->
<section class="carousel-container">

    <div id="cherusCarousel" class="carousel slide" data-bs-ride="carousel">
       <!-- Indicators -->
            <div class="carousel-indicators">
                    Add code here            
            </div>

<!-- Carousel items -->
      <div class="carousel-inner">            
                     <div class="carousel-item active">
                        Add code here
                        <div class="carousel-caption d-none d-md-block">
                        Add code here
                        </div>
                     </div>

                     <div class="carousel-item">
                            Add code here
                        <div class="carousel-caption d-none d-md-block">
                            Add code here
                        </div>
                     </div>

                    <div class="carousel-item">
                        Add code here
                        <div class="carousel-caption d-none d-md-block">
                        Add code here
                        </div>
                    </div>
                    <div class="carousel-item">
                        Add code here
                        <div class="carousel-caption d-none d-md-block">
                            Add code here
                        </div>
                    </div>

                    <div class="carousel-item">
                        Add code here
                        <div class="carousel-caption d-none d-md-block">
                            Add code here
                        </div>
                    </div>
        </div>
<!-- Controls -->
        <button class="carousel-control-prev" type="button" 
data-bs-target="#portfCarousel" data-bs-slide="prev">
                    Add code here
        </button>
        <button class="carousel-control-next" type="button" 
data-bs-target="#portfCarousel" data-bs-slide="next">
                    Add code here
        </button>

        <!-- Play/Pause Button -->
        <button id="carouselPlayPause" class="btn carousel-play-pause">
            <i class="fa-solid fa-pause"></i>
        </button>

    </div>

</section>

Next, we write code for the Indicators, Carousel items, Controls and the Play/Pause buttons.
Indicators:
The .carousel-indicators buttons (<button>) allow jumping to a specific slide. data-bs-target points to the carousel ID, data-bs-slide-to specifies the slide index (0-based), class="active" marks the currently visible slide's indicator.

<!-- Indicators -->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#portfCarousel" 
data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
</button>
            <button type="button" data-bs-target="#portfCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#portfCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
            <button type="button" data-bs-target="#portfCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
            <button type="button" data-bs-target="#portfCarousel" data-bs-slide-to="4" aria-label="Slide 5"></button>

        </div>

Items (.carousel-inner) contains the individual slides (.carousel-item). Only one item should have the class="active" initially. Each item contains an and an optional .carousel-caption.
The carousel items:

<!-- Carousel items -->
        <div class="carousel-inner">

            <div class="carousel-item active">
                <img src="./assets/portf images/carousel/yonex.jpg" class="d-block w-100" alt="Running Shoes">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Lorem, ipsum.</h3>
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./assets/portf images/carousel/teamapparel.jpg" class="d-block w-100" alt="Team Apparel">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Lorem, ipsum.</h3>
                    <p>Lorem ipsum dolor sit amet consectetur.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./assets/portf images/carousel/IMG-20250324-WA0073.jpg" class="d-block w-100" alt="Sports Equipment">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Lorem, ipsum dolor.</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./assets/portf images/carousel/accessories.jpg" class="d-block w-100" alt="Accessories">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Lorem, ipsum.</h3>
                    <p>Lorem ipsum dolor sit amet consectetur.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./assets/portf images/carousel/keeprunning.jpg" class="d-block w-100" alt="Accessories">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Lorem, ipsum.</h3>
                    <p>Lorem ipsum dolor sit.</p>
                </div>
            </div>
        </div>

The code for the controls of the carousel. The controls (.carousel-control-prev, .carousel-control-next) build buttons for navigating slides. The data-bs-target points to the carousel ID, data-bs-slide="prev" or "next" tells Bootstrap what action to perform. The elements inside provide the visual icons.

<!-- Controls -->
        <button class="carousel-control-prev" type="button" data-bs-target="#portfCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#portfCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>

The play/pause button for the carousel is a custom button #carouselPlayPause that JavaScript uses to control the pause() and cycle() methods of the Bootstrap carousel instance.

<!-- Play/Pause Button -->
        <button id="carouselPlayPause" class="btn carousel-play-pause">
            <i class="fa-solid fa-pause"></i>
        </button>

This is the final code:

<!-- Carousel Section -->
<section class="carousel-container">
    <div id="portfCarousel" class="carousel slide" data-bs-ride="carousel">
        <!-- Indicators -->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#portfCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#portfCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#portfCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
            <button type="button" data-bs-target="#portfCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
            <button type="button" data-bs-target="#portfCarousel" data-bs-slide-to="4" aria-label="Slide 5"></button>

        </div>


        <!-- Carousel items -->
        <div class="carousel-inner">

            <div class="carousel-item active">
                <img src="./assets/portf images/carousel/yonex.jpg" class="d-block w-100" alt="Running Shoes">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Lorem, ipsum.</h3>
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./assets/portf images/carousel/teamapparel.jpg" class="d-block w-100" alt="Team Apparel">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Lorem, ipsum.</h3>
                    <p>Lorem ipsum dolor sit amet consectetur.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./assets/portf images/carousel/IMG-20250324-WA0073.jpg" class="d-block w-100" alt="Sports Equipment">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Lorem, ipsum dolor.</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./assets/portf images/carousel/accessories.jpg" class="d-block w-100" alt="Accessories">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Lorem, ipsum.</h3>
                    <p>Lorem ipsum dolor sit amet consectetur.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./assets/portf images/carousel/keeprunning.jpg" class="d-block w-100" alt="Accessories">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Lorem, ipsum.</h3>
                    <p>Lorem ipsum dolor sit.</p>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <button class="carousel-control-prev" type="button" data-bs-target="#portfCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#portfCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>

        <!-- Play/Pause Button -->
        <button id="carouselPlayPause" class="btn carousel-play-pause">
            <i class="fa-solid fa-pause"></i>
        </button>
    </div>
</section>







<!-- Scripts -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="./main.js"></script>

Ensure to add the scripts at the end of the carousel section.

The javascript code:

// Carousel
document.addEventListener('DOMContentLoaded', function() {
    // Make sure Bootstrap is loaded
    if (typeof bootstrap !== 'undefined') {
      // Initialize the carousel with auto-scroll
      const carousel = new bootstrap.Carousel(document.getElementById('portfCarousel'), {
        interval: 5000, // Time between slides in milliseconds
        wrap: true,//Makes the carousel loop back to the beginning after the last slide.
        pause: 'hover' //Pauses the autoscroll when the mouse cursor is over the carousel.
      });

      // Handle play/pause button
      const playPauseBtn = document.getElementById('carouselPlayPause');
      if (playPauseBtn) {
        let isPlaying = true;

        playPauseBtn.addEventListener('click', function() {
          if (isPlaying) {
            // Pause the carousel
            carousel.pause();
            playPauseBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
            isPlaying = false;
          } else {
            // Resume the carousel
            carousel.cycle();
            playPauseBtn.innerHTML = '<i class="fa-solid fa-pause"></i>';
            isPlaying = true;
          }
        });
      } else {
        console.error('Play/pause button not found');
      }
    } else {
      console.error('Bootstrap not loaded');
    }
  });

For JS code, ensure the getElementById targets portfCarousel.

Css code:

/* carousel */

.carousel-container {
    margin: 30px auto;
    max-width: 1200px;
    position: relative;
}

.carousel-inner {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.carousel-item img {
    height: 500px;
    object-fit: cover;
}

.carousel-caption {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    padding: 20px;
    bottom: 40px;
}

.carousel-caption h3 {
    font-weight: 700;
    margin-bottom: 10px;
}

.carousel-play-pause {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    border: 2px solid white;
}

.carousel-play-pause:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

/* prev icon more visible */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 50%;
}

.carousel-control-prev,
.carousel-control-next {
  width: 10%;
  opacity: 0.8;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
}

/* carousel indicators more visible */
.carousel-indicators {
    margin-bottom: 10px;
    z-index: 10;
  }

  .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
  }

  .carousel-indicators button.active {
    background-color: white;
    transform: scale(1.2);
  }

/* Responsive adjustments */
@media (max-width: 768px) {
    .carousel-item img {
        height: 350px;
    }

    .carousel-caption {
        display: block !important;
        padding: 10px;
        bottom: 20px;
    }

    .carousel-caption h3 {
        font-size: 1.2rem;
    }

    .carousel-caption p {
        font-size: 0.9rem;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      padding: 15px;
    }

    .carousel-play-pause {
      width: 40px;
      height: 40px;
      bottom: 15px;
      right: 15px;
    }

    .carousel-indicators button {
      width: 8px;
      height: 8px;
    }
  }

For the full code: https://github.com/BryanArapKoech/A-carousel.
Thanks for reading!

How to build a fully responsive hamburger double bar nav bar with a search bar and dropdown links

Kibet ArapKoech — Tue, 15 Apr 2025 16:47:45 +0000

Here, I build a responsive navigation bar for a e-commerce company with a dropdown menu using HTML, CSS and Javascript. The nav bar should have a top nav bar containing a favicon, company name, search bar and phone number. The bottom bar contains Home, About, Shop, Cart, contact and a login button. Shop is a dropdown item with a menu and a sub-menu. The dropdown list should be visible when a user hovers above the dropdown item. The dropdown list items should then close when the pointer moves away from the dropdown item or when the user clicks on the body of the page. The navigation bar should finally look this way:

You can find the full code at:https://github.com/BryanArapKoech/navbar-doublebar.
We start by first adding the fontawesome and remixicons links to the <head><head/> section as below.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top Sportswear - Quality, affordable sportswear and equipment</title>
    <link rel="stylesheet" href="./styles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</head>

The basic structure of our body section is below. In the body section, we are building our navbar inside the <header></header> tag. The next step is building code for the top-navbar and then we can go to the building the bottom-navbar.

<body>
    <!-- Double Navbar Structure -->

<header>

        <!-- Top Navbar -->
<div class="top-navbar">
Add code here
</div>

      <!-- Bottom Navbar -->
<div class="bottom-navbar">
Add code here
</div>
</header>


<!-- Scripts -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script src="./main.js"></script>

</body>

Building the top navbar

The Top navbar will have the components: the favicon with logo text, a search bar and phone. We now add the code to the top-navbar with the final code as:

<!-- Top Navbar -->
<div class="top-navbar">
    <div class="top-navbar__content">
        <section class="logo">
            <a href="#" class="nav__logo">
                <img src="./icons8-favicon-94.png" alt="logo" class="logo__img">
                <span class="logo__text">Top Sportswear</span>
            </a>
        </section>

        <section class="search">
            <form action="https://www.google.com/search" method="get" class="search_bar">
                <input type="text" placeholder="Search for any product..." name="search_product">
                <button type="submit"><img src="./assets/icons/searchblack.svg" width="25" height="25" alt="search_icon"></button>
            </form>
        </section>

        <!-- hamburger for mobile -->
        <div class="hamburger" id="hamburger-menu">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>

        <section class="phone">
            <i class="fa-solid fa-phone icon"></i>
            +254(727)7383974
        </section>
    </div>
</div>

We give the contents of the top-navbar a class "top-navbar_content." For good code organization, we add inside the class a section of each of the components we want to add. We use an svg image for cleaner implementation and put the text next to in a <span><span/> with a class “logo_text" so that we can easily change its properties.
For the form section, we have used a dummy link https://www.google.com/search with the method “get” and class “search_bar.”
This is the code for the hamburger:

<!-- hamburger for mobile -->
        <div class="hamburger" id="hamburger-menu">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>

        <section class="phone">
            <i class="fa-solid fa-phone icon"></i>
            +254(721)370738
        </section>
    </div>
</div>

We want the hamburger for screens of size <768pixels to be at the same level as the search bar, so we place it just above the phone section as:

<section class="phone">
            <i class="fa-solid fa-phone icon"></i>
            +254(727)7383974
        </section>

Building the bottom navbar

The bottom bar has home, About Us (has a dropdown), shop (has a dropdown and dropdown sub-menu), cart, contact and login.

 <!-- Bottom Navbar -->
        <div class="bottom-navbar">
            <div class="bottom-navbar__content">
                <nav class="nav-container">
            Add code here
                </nav>


            </div>
        </div>

Inside the nav-container we add the code for the bottom-bar items. But first, we define a general structure. Here we use lists. For the The About us and Shop, there's more coding work to be done!! But the general of the bottom-navbar code structure is as below.

<!-- Bottom Navbar -->
        <div class="bottom-navbar">
            <div class="bottom-navbar__content">
                <nav class="nav-container">
                    <div class="nav__menu" id="nav-menu">
                        <ul class="nav__list">
                            <li><a href="#" class="nav__link">Home</a></li>

                            <!-- About Us Dropdown -->
                            <li class="dropdown__item">
                                <div class="nav__link">
                                    About Us <i class="ri-arrow-down-s-line dropdown__arrow"></i>
                                </div>  
            Add code here                              

                            </li>

                            <!-- Shop Dropdown -->
                            <li class="dropdown__item">
                                <div class="nav__link">
                                    Shop <i class="ri-arrow-down-s-line dropdown__arrow"></i>
                                </div> 
            Add code here                               

                            </li>

                            <li><a href="#" class="nav__link">Cart</a></li>
                            <li><a href="#" class="nav__link">Contact</a></li>
                            <li><a href="#" class="btn">Login</a></li>
                        </ul>
                    </div>
                </nav>


            </div>
        </div>

For the bottom navbar items with dropdowns, we give them a list class "dropdown__item" and then give the item text (i.e About us and Shop) a class name "nav__link".
Lets write code for the About Us section. For this, we create an unordered list (ul) inside the list (li) with the class "dropdown__menu".

<!-- Bottom Navbar -->
        <div class="bottom-navbar">
            <div class="bottom-navbar__content">
                <nav class="nav-container">
                    <div class="nav__menu" id="nav-menu">
                        <ul class="nav__list">
                            <li><a href="#" class="nav__link">Home</a></li>

                            <!-- About Us Dropdown -->
                            <li class="dropdown__item">
                                <div class="nav__link">
                                    About Us <i class="ri-arrow-down-s-line dropdown__arrow"></i>
                                </div>

                                <ul class="dropdown__menu">
                                    <li>
                                        <a href="#" class="dropdown__link">
                                            <i class="ri-user-line"></i> Our Mission
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">
                                            <i class="ri-lock-line"></i> Our Vision
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <!-- Shop Dropdown -->
                            <li class="dropdown__item">
                                <div class="nav__link">
                                    Shop <i class="ri-arrow-down-s-line dropdown__arrow"></i>
                                </div>

                                Add code here
                            </li>

                            <li><a href="#" class="nav__link">Cart</a></li>
                            <li><a href="#" class="nav__link">Contact</a></li>
                            <li><a href="#" class="btn">Login</a></li>
                        </ul>
                    </div>
                </nav>


            </div>
        </div>

Next, lets write code for the Shop section. For this, we create an unordered list (ul) inside the list (li) with the class "dropdown__menu". this is the code in the context of the general structure:

 <!-- About Us Dropdown -->
                            <li class="dropdown__item">
                                <div class="nav__link">
                                    About Us <i class="ri-arrow-down-s-line dropdown__arrow"></i>
                                </div>

                                <ul class="dropdown__menu">
                                    <li>
                                        <a href="#" class="dropdown__link">
                                            <i class="ri-user-line"></i> Our Mission
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">
                                            <i class="ri-lock-line"></i> Our Vision
                                        </a>
                                    </li>
                                </ul>
                            </li>

Now,

<!-- About Us Dropdown -->
                            <li class="dropdown__item">
                                <div class="nav__link">
                                    About Us <i class="ri-arrow-down-s-line dropdown__arrow"></i>
                                </div>

                                <ul class="dropdown__menu">
                                    <li>
                                        <a href="#" class="dropdown__link">
                                            <i class="ri-user-line"></i> Our Mission
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">
                                            <i class="ri-lock-line"></i> Our Vision
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <!-- Shop Dropdown -->
                            <li class="dropdown__item">
                                <div class="nav__link">
                                    Shop <i class="ri-arrow-down-s-line dropdown__arrow"></i>
                                </div>

                                <ul class="dropdown__menu">
                                    <li>
                                        <a href="#" class="dropdown__link">Shoes</a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">Fullsuit</a>
                                    </li>

                                    <!-- Equipment Submenu -->
                                    <li class="dropdown__subitem">
                                        <div class="dropdown__link">
                                            Equipment <i class="ri-add-line dropdown__add"></i>
                                        </div>

                                        <ul class="dropdown__submenu">
                                            <li>
                                                <a href="#" class="dropdown__sublink">Balls</a>
                                            </li>

                                            <li>
                                                <a href="#" class="dropdown__sublink">Nets</a>
                                            </li>

                                            <li>
                                                <a href="#" class="dropdown__sublink">Bags</a>
                                            </li>

                                            <li>
                                                <a href="#" class="dropdown__sublink">Cones</a>
                                            </li>

                                            <li>
                                                <a href="#" class="dropdown__sublink">Ankle support</a>
                                            </li>

                                            <li>
                                                <a href="#" class="dropdown__sublink">Leg sleeve</a>
                                            </li>
                                        </ul>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">Vests</a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">Gloves</a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">Jackets</a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">Caps</a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">Shorts</a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">T-shirts</a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">Socks</a>
                                    </li>
                                </ul>
                            </li>

The overall code is for the navbar now is:

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top Sportswear - Quality, affordable sportswear and equipment</title>
    <link rel="stylesheet" href="./styles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
    <!-- Double Navbar Structure -->
    <header>

       <!-- Top Navbar -->
<div class="top-navbar">
    <div class="top-navbar__content">
        <section class="logo">
            <a href="#" class="nav__logo">
                <img src="./icons8-favicon-94.png" alt="logo" class="logo__img">
                <span class="logo__text">Top Sportswear</span>
            </a>
        </section>

        <section class="search">
            <form action="https://www.google.com/search" method="get" class="search_bar">
                <input type="text" placeholder="Search for any product..." name="search_product">
                <button type="submit"><img src="./assets/icons/searchblack.svg" width="25" height="25" alt="search_icon"></button>
            </form>
        </section>

        <!-- hamburger for mobile -->
        <div class="hamburger" id="hamburger-menu">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>

        <section class="phone">
            <i class="fa-solid fa-phone icon"></i>
            +254(727)7383974
        </section>
    </div>
</div>

        <!-- Bottom Navbar -->
        <div class="bottom-navbar">
            <div class="bottom-navbar__content">
                <nav class="nav-container">
                    <div class="nav__menu" id="nav-menu">
                        <ul class="nav__list">
                            <li><a href="#" class="nav__link">Home</a></li>

                            <!-- About Us Dropdown -->
                            <li class="dropdown__item">
                                <div class="nav__link">
                                    About Us <i class="ri-arrow-down-s-line dropdown__arrow"></i>
                                </div>

                                <ul class="dropdown__menu">
                                    <li>
                                        <a href="#" class="dropdown__link">
                                            <i class="ri-user-line"></i> Our Mission
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">
                                            <i class="ri-lock-line"></i> Our Vision
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <!-- Shop Dropdown -->
                            <li class="dropdown__item">
                                <div class="nav__link">
                                    Shop <i class="ri-arrow-down-s-line dropdown__arrow"></i>
                                </div>

                                <ul class="dropdown__menu">
                                    <li>
                                        <a href="#" class="dropdown__link">Shoes</a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">Fullsuit</a>
                                    </li>

                                    <!-- Equipment Submenu -->
                                    <li class="dropdown__subitem">
                                        <div class="dropdown__link">
                                            Equipment <i class="ri-add-line dropdown__add"></i>
                                        </div>

                                        <ul class="dropdown__submenu">
                                            <li>
                                                <a href="#" class="dropdown__sublink">Balls</a>
                                            </li>

                                            <li>
                                                <a href="#" class="dropdown__sublink">Nets</a>
                                            </li>

                                            <li>
                                                <a href="#" class="dropdown__sublink">Bags</a>
                                            </li>

                                            <li>
                                                <a href="#" class="dropdown__sublink">Cones</a>
                                            </li>

                                            <li>
                                                <a href="#" class="dropdown__sublink">Ankle support</a>
                                            </li>

                                            <li>
                                                <a href="#" class="dropdown__sublink">Leg sleeve</a>
                                            </li>
                                        </ul>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">Vests</a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">Gloves</a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">Jackets</a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">Caps</a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">Shorts</a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">T-shirts</a>
                                    </li>

                                    <li>
                                        <a href="#" class="dropdown__link">Socks</a>
                                    </li>
                                </ul>
                            </li>

                            <li><a href="#" class="nav__link">Cart</a></li>
                            <li><a href="#" class="nav__link">Contact</a></li>
                            <li><a href="#" class="btn">Login</a></li>
                        </ul>
                    </div>
                </nav>


            </div>
        </div>
    </header>







   <!-- Scripts -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="./main.js"></script>

</body>
</html>

Javascript code:

// Mobile Menu Toggle
const hamburger = document.getElementById('hamburger-menu');
const navMenu = document.getElementById('nav-menu');

hamburger.addEventListener('click', () => {
navMenu.classList.toggle('show-menu');
hamburger.classList.toggle('active'); // Add/remove active class for X shape
}); 

// Close menu when clicking outside
document.addEventListener('click', (e) => {
if (!hamburger.contains(e.target) && !navMenu.contains(e.target)) {
    navMenu.classList.remove('show-menu');
    hamburger.classList.remove('active'); // Remove active class when closing menu
}
});

The css code:

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Top Navbar */
.top-navbar {
    background-color: #f8f9fa;
    padding: 10px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.top-navbar__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo__img {
    height: 40px;
    margin-right: 10px;
}

.logo__text {
    font-weight: 700;
    font-size: 1.25rem;
    color: #2c3e50;
    text-decoration: none; /* Remove underline */
}

.nav__logo {
    text-decoration: none; /* Remove underline from the link */
    display: flex;
    align-items: center;
}

.search_bar {
    display: flex;
    align-items: center;
    width: 400px;
    max-width: 100%;
    border: 1px solid #ddd;
    border-radius: 50px;
    overflow: hidden;
}

.search_bar input {
    flex: 1;
    padding: 10px 15px;
    border: none;
    outline: none;
}

.search_bar button {
    background: transparent;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
}

.phone {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #2c3e50;
}

.phone .icon {
    margin-right: 8px;
    color: #3498db;
}

/* Bottom Navbar */
.bottom-navbar {
    background-color: #2c3e50;
    padding: 15px 0;
}

.bottom-navbar__content {
    display: flex;
    justify-content: center; /* Center the navigation */
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.nav-container {
    width: 100%;
}

.nav__menu {
    display: flex;
    justify-content: center; /* Center the menu */
    width: 100%;
}

.nav__list {
    display: flex;
    justify-content: center; /* Center the list items */
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 800px; /* Limit the width for better centering */
}

.nav__link {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    font-weight: 500;
    transition: color 0.3s;
}

.nav__link:hover {
    color: #3498db;
}

.dropdown__arrow {
    margin-left: 5px;
}

.dropdown__item {
    position: relative;
}

.dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 5px;
    padding: 10px 0;
    list-style: none;
    z-index: 100;
    display: none;
}

.dropdown__item:hover .dropdown__menu {
    display: block;
}

.dropdown__link {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    color: #212121;
    text-decoration: none;
    transition: background-color 0.3s;
}

.dropdown__link:hover {
    background-color: #f1f1f1;
    color: #3498db;
}

.dropdown__subitem {
    position: relative;
}

.dropdown__submenu {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 200px;
    background-color:#fbf6f6;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 5px;
    padding: 10px 0;
    list-style: none;
    display: none;
}

.dropdown__subitem:hover .dropdown__submenu {
    display: block;
}

.dropdown__add {
    margin-left: auto;
}

.dropdown__sublink {
    display: block;
    padding: 10px 20px;
    color: #212121;
    text-decoration: none;
    transition: background-color 0.3s;
}

.dropdown__sublink:hover {
    background-color: #f1f1f1;
    color: #3498db;
}

.btn {
    background-color: #3498db !important;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #5a7c93;
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    height: 20px;
    width: 25px;
    cursor: pointer;
    position: relative;

}

/* Hamburger to X transformation */
.hamburger.active .bar:nth-child(1) {
transform: translateY(8.5px) rotate(45deg);

}

.hamburger.active .bar:nth-child(2) {
opacity: 0;

}

.hamburger.active .bar:nth-child(3) {
transform: translateY(-8.5px) rotate(-45deg);

}

.bar {
    width: 25px;
    height: 3px;
    background-color: #201414;
    border-radius: 3px;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Responsive */
@media (max-width: 995px) {
    .nav__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100%;
        background-color: #2c3e50;
        transition: right 0.3s;
        padding: 80px 20px 20px;
        z-index: 90;
        justify-content: flex-start;
    }

    .nav__menu.show-menu {
        right: 0;
    }

    .bottom-navbar__content {
        justify-content: space-between;
    } 

    .nav__list {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .dropdown__menu, .dropdown__submenu {
        position: static;
        width: 100%;
        box-shadow: none;
        padding-left: 20px;
    }

    .hamburger {
        display: flex;
        z-index: 100;
    }

    .search_bar {
        width: 250px;
    }

    .phone {
        display: none;
    }

    .dropdown__link, .dropdown__sublink {
        color: #fff;
    }

    .dropdown__link:hover, .dropdown__sublink:hover {
        background-color: #34495e;
    }
}

@media (max-width: 768px) {
.top-navbar__content {
flex-wrap: wrap;
position: relative;
}

.logo {
order: 1;
width: 100%;
margin-bottom: 10px;
justify-content: center; /* Center the logo */
}
/* phone below logo */
.phone{
order: 2;
width: 100%;
justify-content: center;
margin-bottom: 10px;
display: flex;

}

.search {
order: 3;
width: calc(100% - 50px); /* Make room for hamburger */
}

.search_bar {
width: 100%;
}

/* hamburger next to search bar */
.hamburger {
position: absolute;
bottom: 14px; /* Align with search bar */
right: 15px;
display: flex;
z-index: 100;
}

/* Change hamburger color to match theme */
.bar {
background-color: black;
}

/* Hide bottom navbar hamburger */
.bottom-navbar .hamburger {
display: none;
}

/* Hide phone number completely on small screens */
.phone {
display: none;
}
}

That is how to build a responsive double bar navigation bar!!
Full code at: You can find the full code at:https://github.com/BryanArapKoech/navbar-doublebar.