Navbar-toggler not working correctly

Question

i want to use navbar-toggler but i have two issues, first see my code please:

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Admin</title>
</head>
<body>

<nav class="navbar navbar-toggler-sm navbar-light  bg-success">
  <button class="navbar-toggler navbar-toggler-right">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a href="#" class="navbar-brand" style="color: white">management</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav" style="color: white">
      <li class="nav-item1"><a class="nav-link active"> Dashboard</a></li>
      <li class="nav-item2"><a class="nav-link">Ads</a></li>
      <li class="nav-item3"><a class="nav-link">Users</a></li>
    </ul>
  </div>
</nav>

1- navbar-brand and navbar-icon are in the opposite position(right and left in page) in the navbar but i want them to be next to each other!

2- I can not see the nav items in the navbar. why?

Thank you for helping me!

adding your css would be really helpful :) (P.S. a snippet would be way better) — Salvatore, Aug 19 '18 at 14:42
Css has nothing, just a (margin-right= 10px) for navbar-brand — Saeid Rasouli, Aug 19 '18 at 15:06
The navbar-toggler-sm class doesn't exist. Please [read the Navbar docs](http://getbootstrap.com/docs/4.1/components/navbar/). If you want the Brand next to the toggler use justify-content-start: https://www.codeply.com/go/nZ2ZG4VJgs — Carol Skelly, Aug 19 '18 at 15:10

95faf8e76605e973 · Accepted Answer · 2018-08-19T16:03:53.933

You need to add data-toggle and data-target to the navbar toggler
See https://getbootstrap.com/docs/4.0/components/navbar/

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<body>
<nav class="navbar navbar-toggler-sm navbar-light  bg-success">
<div class="navbar-header">
    <button class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>

    <a href="#" class="navbar-brand" style="color: white">management</a>

    <div id="navbarNav" class="collapse navbar-collapse">
        <ul class="navbar-nav" style="color: white">
            <li class="nav-item1"><a class="nav-link active"> Dashboard</a></li>
            <li class="nav-item2"><a class="nav-link">Ads</a></li>
            <li class="nav-item3"><a class="nav-link">Users</a></li>
        </ul>
    </div>
</div>
</nav>
</body>

It is a Bootstrap default... well anyway I edited my answer. Hope it helps. Read the docs at https://getbootstrap.com/docs/4.0/components/navbar/ — 95faf8e76605e973, Aug 19 '18 at 16:04

Navbar-toggler not working correctly

1 Answers1