I've created my website with Bootstrap 5.02. My website address is the following: https://www.cafetiere-automatique.fr
The problem is when I made the burger menu for the mobile and tablet views, the burger menu breaks the navigation and the logo. I mean it pushes the logo on the left hand side and make it very small.
There is probably a mistake on my html code or maybe the solution is a new bit of codes to add to it.
To summarize, I put a navigation code from Bootstrap, but the burger menu was going down on another line on tablet and mobile views. So, I add the class flex-nowrap on the following sippet:
<div class="container">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<div class="container-fluid flex-nowrap">
Now, the burger menu stays on the same line with the logo. However, when you click it, the dropdown menu breaks the logo and pushes it on the left hand side. Basically, the dropdown menu should rolls down on the bottom.
Please find below my website's source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logo Cafetière Automatique</title>
<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=Abril+Fatface&family=Open+Sans:wght@300;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<div class="container-fluid flex-nowrap">
<nav class="navbar navbar-light">
<div class="container">
<a class="navbar-brand" href="/">
<img src="images/logo-cafetiere-automatique-blanc-carre.svg" alt="Logo Cafetière Automatique" width="350" height="auto" class="img-fluid">
</a>
</div>
</nav>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- BUTTON - DROPDOWN -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto float-end mb-2 mb-lg-0">
<li class="nav-item dropdown btn btn-outline-light me-4" style="width: 120px;">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Marques
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">De'Longhi</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Krups</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Philips</a></li>
</ul>
</li>
<!-- BUTTON - NORMAL -->
<li class="nav-item btn btn-outline-light" style="width: 120px;">
<a class="nav-link text-white" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Jumbotron -->
<div class="jumbotron">
<div class="row">
<div class="col-12 col-md-7 text-center text-md-start">
<h1 class="display-1 text-white drop-shadow">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-outline-light btn-lg mt-4 px-5 py-3" href="#" role="button">Learn more</a>
</p>
</div>
<div class="col-12 col-md-5">
<img src="images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique@0,25x.webp" alt="Cafetière automatique De'Longhi Magnifica avec broyeur espresso et latte" class="img-fluid" width="1000px" height="auto" srcset="images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique@0,25x.webp 500w, images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique@0,5x.webp 1000w, images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique.webp 1500w">
</div>
</div>
</div>
<!-- Shop's Message -->
<div class="row">
<div class="col-12 col-md-4">
<img src="images/message-boutique-cafetiere-automatique@0,5x.webp" alt=" Message boutique Cafetière Automatique" width="1000" height="auto" class="img-fluid border rounded-start border-0" srcset="images/message-boutique-cafetiere-automatique@0,5x.webp 500w, images/message-boutique-cafetiere-automatique@0,75x.webp 1000w, images/message-boutique-cafetiere-automatique.webp 1500w">
</div>
<div class="col-12 col-md-8 bg-white p-4 d-flex align-items-center border border-dark rounded-end border-lg">
<section>
<h2>Message from our shop</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero at repellendus doloribus pariatur itaque assumenda excepturi voluptatem velit distinctio id, dolor illum reprehenderit sint labore ex, suscipit provident repellat architecto harum ad sequi sit numquam ullam. Repudiandae, necessitatibus. In reprehenderit provident quisquam sapiente mollitia porro quidem, qui laborum a adipisci eum odio aliquid laboriosam veritatis magni ad minus rem minima.</p>
</section>
</div>
</div>
<!-- Carousel -->
<div id="carouselExampleControls" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="3000">
<img src="images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique@0,25x.webp" class="d-block mx-auto img-fluid" width="1000px" height="auto" alt="Cafetière automatique De'Longhi Magnifica Expresso avec broyeur" srcset="images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique@0,25x.webp 500w, images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique@0,5x.webp 1000w, images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique.webp 1500w">
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="images/carousel2-tr-krups-essential-machine-a-cafe-a-grain-broyeur-noir-cafetiere-automatique@0,25x.webp" class="d-block mx-auto img-fluid" width="1000px" height="auto" alt="Cafetière automatique Krups Essential machine à café avec broyeur à grain" srcset="images/carousel2-tr-krups-essential-machine-a-cafe-a-grain-broyeur-noir-cafetiere-automatique@0,25x.webp 500w, images/carousel2-tr-krups-essential-machine-a-cafe-a-grain-broyeur-noir-cafetiere-automatique@0,5x.webp 1000w, images/carousel2-tr-krups-essential-machine-a-cafe-a-grain-broyeur-noir-cafetiere-automatique.webp 1500w">
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="images/carousel3-tr-philips-ep2221-40-machine-espresso-series-2200-mousseur-a-lait-noir-laque-cafetiere-automatique@0,25x.webp" class="d-block mx-auto img-fluid" width="1000px" height="auto" alt="Cafetière automatique Philips E2221/40 machine à Espresso séries 2200 avec mousseur à lait" srcset="images/carousel3-tr-philips-ep2221-40-machine-espresso-series-2200-mousseur-a-lait-noir-laque-cafetiere-automatique@0,25x.webp 500w, images/carousel3-tr-philips-ep2221-40-machine-espresso-series-2200-mousseur-a-lait-noir-laque-cafetiere-automatique@0,5x.webp 1000w, images/carousel3-tr-philips-ep2221-40-machine-espresso-series-2200-mousseur-a-lait-noir-laque-cafetiere-automatique.webp 1500w">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Cards -->
<div class="row row-cols-1 row-cols-md-2 g-4 my-5">
<div class="col">
<div class="card shadow border-0" style="width: 100%;">
<img src="images/card1-krups-essential-noire-cafetiere-automatique-broyeur-grains-cafe@0,25x.webp" class="card-img-top img-fluid" alt="Krups Essential cafetière automatique noire broyeur à grains de café" srcset="images/card1-krups-essential-noire-cafetiere-automatique-broyeur-grains-cafe@0,25x.webp 500w, images/card1-krups-essential-noire-cafetiere-automatique-broyeur-grains-cafe@0,5x.webp 1000w, images/card1-krups-essential-noire-cafetiere-automatique-broyeur-grains-cafe.webp 1500w">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card shadow border-0" style="width: 100%;">
<img src="images/card2-de-longhi-magnifica-s-ecam22.110.b-noir-cafetiere-automatique-mousseur-a-lait@0,25x.webp" class="card-img-top img-fluid" alt="De'Longhi Magnifica S ECAM 22.110 B noir mousseur à lait cafetière automatique" srcset="images/card2-de-longhi-magnifica-s-ecam22.110.b-noir-cafetiere-automatique-mousseur-a-lait@0,25x.webp 500w, images/card2-de-longhi-magnifica-s-ecam22.110.b-noir-cafetiere-automatique-mousseur-a-lait@0,5x.webp 1000w, images/card2-de-longhi-magnifica-s-ecam22.110.b-noir-cafetiere-automatique-mousseur-a-lait.webp 1500w">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card shadow border-0" style="width: 100%;">
<img src="images/card3-krups-essential-noire-cafetiere-automatique-espresso@0,25x.webp" class="card-img-top img-fluid" alt="Krups Essential cafetière automatique noire espresso" srcset="images/card3-krups-essential-noire-cafetiere-automatique-espresso@0,25x.webp 500w, images/card3-krups-essential-noire-cafetiere-automatique-espresso@0,5x.webp 1000w, images/card3-krups-essential-noire-cafetiere-automatique-espresso.webp 1500w">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card shadow border-0" style="width: 100%;">
<img src="images/card4-krups-essential-noire-cafetiere-automatique-latte@0,25x.webp" class="card-img-top img-fluid" alt="Krups Essential cafetière automatique noire latte" srcset="images/card4-krups-essential-noire-cafetiere-automatique-latte@0,25x.webp 500w, images/card4-krups-essential-noire-cafetiere-automatique-latte@0,5x.webp 1000w, images/card4-krups-essential-noire-cafetiere-automatique-latte.webp 1500w">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Is there anyone who can help me sort this issue out?