How to create top navbar with logo and collapsible icon in Bootstrap 4

1 Answer

0 votes
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- scale=1 for mobile website -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap 4</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
  </head>

  <body>
    <!-- Navigation -->
    <!-- Medium (md) for devices like tablets, 768px and up -->
    <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
      <!-- container-fluid for 100% of the screen -->
      <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="img/yourlogo.png" /></a>
        <!-- Collapsible icon (button) that is visible only when the screen is small -->
        <button class="navbar-toggler" type="button" data-toggle="collapse">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </nav>

  </body>
</html>

 



answered Apr 4, 2020 by avibootz
edited Apr 4, 2020 by avibootz
...