why is nav icon not showing?-CodePudding

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- Own Css -->
  <link rel="stylesheet" href="css/style.css">
  <title>Tropico</title>
</head>
<body>
  <!-- Section - 1 Navigation Starts -->
  <nav >
    <div >
      <a href="#" ><img src="img/logo.png" alt=""><span>Tropico</span></a>
      <button  type="button" data-toggle="collapse" data-target="#navmenu">
        <span ></span>
      </button>
      <div  id="navmenu">
        <ul >
          <li >
            <a href="#home" >Home</a>
          </li>
          <li >
            <a href="#fruits" >Fruits</a>
          </li>
          <li >
            <a href="#service" >Services</a>
          </li>
          <li >
            <a href="#contact" >Contact us</a>
          </li>
          <button >Get a quote</button>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Section - 1 Navigation End -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
</body>
</html>

Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5. Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5 Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5 Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5 Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5 Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5

CodePudding user response：

maybe your source in img tag is wrong if you have img folder in your root path (based on src="img/logo.png") change it to <img src="/img/logo.png" alt="">

If not worked see html file paths

CodePudding user response：

Since you are using Bootstrap 5.0.2, you got to do the following modification:

Add .navbar-light in <nav> to have the nav burger menu icon displayed. It's because the selector in Bootstrap to display the image is .navbar-light .navbar-toggler-icon so without .navbar-light it won't be displayed.

Spotted another issue with the interaction with this toggle icon. You'll need to do the following modifications as well:

Modify data-toggle="collapse" to data-bs-toggle="collapse"
Modify data-target="#navmenu" to data-bs-target="#navmenu"

FYI data-target was the previous annotation used in Bootstrap v4. Now, in Bootstrap v5, every data-* has been changed to data-bs-*

Don't forget to use aria-* as mentioned in Bootstrap documentation as well for accessibility :)