My toggle navbar doesn't work

HTML & CSS
1

Hi guys, new guy here. I am trying to develop an application and i created a navbar which i would like it to display on toggle when the browser window is resized. I also want it to display the sidebar alongside with it which it should BUT it is not. My HTML code is below:

<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">

      <div class="container-fluid">

        <div class="navbar-wrapper">

          <a class="navbar-brand" href="javascript:;">Dashboard</a>

        </div>

        <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">

          <span class="sr-only">Toggle navigation</span>

          <span class="navbar-toggler-icon icon-bar"></span>

          <span class="navbar-toggler-icon icon-bar"></span>

          <span class="navbar-toggler-icon icon-bar"></span>

        </button>

        <div class="collapse navbar-collapse justify-content-end">

          <form class="navbar-form">

            <div class="input-group no-border">

              <input type="text" value="" class="form-control" placeholder="Search...">

              <button type="submit" class="btn btn-white btn-round btn-just-icon">

                <i class="material-icons">search</i>

                <div class="ripple-container"></div>

              </button>

            </div>

          </form>

          <ul class="navbar-nav">

            <li class="nav-item">

              <a class="nav-link" href="javascript:;">

                <i class="material-icons">dashboard</i>

                <p class="d-lg-none d-md-block">

                  Stats

                </p>

              </a>

            </li>

            <li class="nav-item dropdown">

              <a class="nav-link" id="#navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                <i class="material-icons">notifications</i>

                <span class="notification">5</span>

                <p class="d-lg-none d-md-block">

                  Some Actions

                </p>

              </a>

              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">

                <a class="dropdown-item" href="#">Mike John responded to your email</a>

                <a class="dropdown-item" href="#">You have 5 new tasks</a>

                <a class="dropdown-item" href="#">You're now friend with Andrew</a>

                <a class="dropdown-item" href="#">Another Notification</a>

                <a class="dropdown-item" href="#">Another One</a>

              </div>

            </li>

            <li class="nav-item dropdown">

              <a class="nav-link" href="javascript:;" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                <i class="material-icons">person</i>

                <p class="d-lg-none d-md-block">

                  Account

                </p>

              </a>

              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">

                <a class="dropdown-item" href="#">Profile</a>

                <a class="dropdown-item" href="#">Settings</a>

                <div class="dropdown-divider"></div>

                <a class="dropdown-item" href="#">Log out</a>

              </div>

            </li>

          </ul>

        </div>

      </div>

    </nav>

The funny thing is that when I resize the broswer window, the toggle icon appears but when i click on it, the doesn’t display my navbar and sidebar as it should.

I need help.

2

Do you have it online, or else you need to also post relevant CSS for the posted HTML

3

I am running it on localhost since i am developing and i am using bootstrap 5

4

Can you find the Bootstrap CSS that is used?

You might also find the solution at:

2 Likes
5

I think you need to add the data-target to the button and the ID to the nav (data-target=“#collapse” and `<div id=“collapse” etc…).

e.g.
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation" data-target="#collapse">

and

<div id="collapse" class="collapse navbar-collapse justify-content-end">

Full code:

<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
  <div class="container-fluid">
    <div class="navbar-wrapper">
      <a class="navbar-brand" href="javascript:;">Dashboard</a>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation" data-target="#collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="navbar-toggler-icon icon-bar"></span>
      <span class="navbar-toggler-icon icon-bar"></span>
      <span class="navbar-toggler-icon icon-bar"></span>
    </button>

    <div id="collapse" class="collapse navbar-collapse justify-content-end">
      <form class="navbar-form">
        <div class="input-group no-border">
          <input type="text" value="" class="form-control" placeholder="Search...">
          <button type="submit" class="btn btn-white btn-round btn-just-icon">
            <i class="material-icons">search</i>
            <div class="ripple-container"></div>
          </button>
        </div>
      </form>

      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="javascript:;">
            <i class="material-icons">dashboard</i>
            <p class="d-lg-none d-md-block">
              Stats
            </p>
          </a>

        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" id="#navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="material-icons">notifications</i>
            <span class="notification">5</span>
            <p class="d-lg-none d-md-block">
              Some Actions
            </p>
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Mike John responded to your email</a>
            <a class="dropdown-item" href="#">You have 5 new tasks</a>
            <a class="dropdown-item" href="#">You're now friend with Andrew</a>
            <a class="dropdown-item" href="#">Another Notification</a>
            <a class="dropdown-item" href="#">Another One</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" href="javascript:;" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="material-icons">person</i>
            <p class="d-lg-none d-md-block">
              Account
            </p>
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">

            <a class="dropdown-item" href="#">Profile</a>
            <a class="dropdown-item" href="#">Settings</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Log out</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav >

Working example:

That assumes you have linked to the bootstrap css and js files as required.

2 Likes
6

It is not working yet. It is an angular project and i have already bootstrap installed and in my angular.json, I had it included.( code is below:)

my angular.json file part for styles to be used in the entire project:

"styles": [

              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",

              "./node_modules/bootstrap/dist/css/bootstrap.min.css",

              "src/styles.scss"

            ],

            "scripts": [

              "./node_modules/jquery/dist/jquery.min.js",

              "./node_modules/bootstrap/dist/js/bootstrap.js",

              "./node_modules/@popperjs/core/dist/umd/popper.min.js"

            ]

My full code for the html file which also includes both the sidebar and navbar is below:

<div class="wrapper">

  <!--Sidebar-->

  <div

    class="sidebar"

    data-color="orange"

    data-background-color="white"

    data-image="../../../assets/sidebar-1.jpg"

  >

    <div class="logo">

      <img src="" alt="" />

      <a href="#" class="simple-text logo-normal"> WorkOnPro </a>

    </div>

    <div class="sidebar-wrapper">

      <ul class="nav">

        <li class="nav-item active">

          <a href="" class="nav-link">

            <i class="material-icons">dashboard</i>

            <p>Dashboard</p>

          </a>

        </li>

        <li class="nav-item">

          <a href="#" class="nav-link">

            <i class="material-icons">work</i>

            <p>Work Orders</p>

          </a>

        </li>

        <li class="nav-item">

          <a href="#" class="nav-link">

            <i class="material-icons">wifi</i>

            <p>Providers</p>

          </a>

        </li>

        <li class="nav-item">

          <a href="#" class="nav-link">

            <i class="material-icons">computer</i>

            <p>Freelancers</p>

          </a>

        </li>

        <li class="nav-item">

          <a href="#" class="nav-link">

            <i class="material-icons">info</i>

            <p>Issues</p>

          </a>

        </li>

        <li class="nav-item">

          <a href="#" class="nav-link">

            <i class="material-icons">message</i>

            <p>Message</p>

          </a>

        </li>

        <li class="nav-item">

          <a href="#" class="nav-link">

            <i class="material-icons">notifications</i>

            <p>Notifications</p>

          </a>

        </li>

        <li class="nav-item">

          <a href="#" class="nav-link">

            <i class="material-icons">settings</i>

            <p>Settings</p>

          </a>

        </li>

      </ul>

    </div>

  </div>

  <!-- End of Sidebar -->

  <div class="main-panel">

    <!-- Navbar -->

    <nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">

      <div class="container-fluid">

        <div class="navbar-wrapper">

          <a class="navbar-brand" href="javascript:;">Dashboard</a>

        </div>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">

          <span class="sr-only">Toggle navigation</span>

          <span class="navbar-toggler-icon icon-bar"></span>

          <span class="navbar-toggler-icon icon-bar"></span>

          <span class="navbar-toggler-icon icon-bar"></span>

        </button>

        <div id="collapse" class="collapse navbar-collapse justify-content-end">

          <form class="navbar-form">

            <div class="input-group no-border">

              <input type="text" value="" class="form-control" placeholder="Search...">

              <button type="submit" class="btn btn-white btn-round btn-just-icon">

                <i class="material-icons">search</i>

                <div class="ripple-container"></div>

              </button>

            </div>

          </form>

          <ul class="navbar-nav">

            <li class="nav-item">

              <a class="nav-link" href="javascript:;">

                <i class="material-icons">dashboard</i>

                <p class="d-lg-none d-md-block">

                  Stats

                </p>

              </a>

            </li>

            <li class="nav-item dropdown">

              <a class="nav-link" href="javascript:;" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                <i class="material-icons">notifications</i>

                <span class="notification">5</span>

                <p class="d-lg-none d-md-block">

                  Some Actions

                </p>

              </a>

              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">

                <a class="dropdown-item" href="#">Mike John responded to your email</a>

                <a class="dropdown-item" href="#">You have 5 new tasks</a>

                <a class="dropdown-item" href="#">You're now friend with Andrew</a>

                <a class="dropdown-item" href="#">Another Notification</a>

                <a class="dropdown-item" href="#">Another One</a>

              </div>

            </li>

            <li class="nav-item dropdown">

              <a class="nav-link" href="javascript:;" id="navbarDropdownProfile" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                <i class="material-icons">person</i>

                <p class="d-lg-none d-md-block">

                  Account

                </p>

              </a>

              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">

                <a class="dropdown-item" href="#">Profile</a>

                <a class="dropdown-item" href="#">Settings</a>

                <div class="dropdown-divider"></div>

                <a class="dropdown-item" href="#">Log out</a>

              </div>

            </li>

          </ul>

        </div>

      </div>

    </nav>

<!-- End Navbar -->

    <!-- Main Content -->

    <div class="content">

      <div class="container-fluid">

        <!-- New row for mini cards-->

        

        <!-- End of row for mini cards-->

        <!-- New row for work orders and issues -->

        <!-- End of row for work orders and issues -->

        <!-- New row for Providers and freelancers-->

        <!-- End of row for providers and freelancers-->

      </div>

    </div>

    <!-- End of Main Content -->

    <!-- Footer-->

    

    <!-- End of footer-->

  </div>

  <!--End of main panel -->

</div>

<!-- End of wrapper-->

<!-- JS Files -->

<script src="../../shared/assets/js/core/jquery.min.js"></script>

<script src="../../shared/assets/js/core/popper.min.js"></script>

<script src="../../../../node_modules/@popperjs/core/dist/umd/popper.min.js"></script>

<script src="../../shared/assets/js/core/bootstrap-material-design.min.js"></script>

<script src="../../../../node_modules/bootstrap/dist/js/bootstrap.js"></script>

Even after following your advise, i don’t know why it isn’t displaying my navbar and sidebar on toggle when i resize my browser…

As for why i added my bootstrap css like that, check out this link: https://www.techiediaries.com/angular-bootstrap/

7

I don’t know anything about angular I’m afraid as that would be a question for the JS forum but if you can do a 'view source’ from your browser and post the code here we can see if your scripts are actually added properly to the html.

From what you posted above you seem to have 2 versions of popper.min.js here;

<!-- JS Files -->

<script src="../../shared/assets/js/core/jquery.min.js"></script>

<script src="../../shared/assets/js/core/popper.min.js"></script>

<script src="../../../../node_modules/@popperjs/core/dist/umd/popper.min.js"></script>

<script src="../../shared/assets/js/core/bootstrap-material-design.min.js"></script>

<script src="../../../../node_modules/bootstrap/dist/js/bootstrap.js"></script>

if those scripts are extra to the ones that angular is adding then you will have two versions of bootstrap and jquery files also which is bound to cause problems.

I assume also you are not mixing bootstrap3 or bootstrap4 files in the mix also.

As you can see from my codepen the toggle works fine with the correct files added.

8

I get what you mean. I am not mixing bootstraps and yes, i can see from your codepen the toggle works. I just can’t understand why mine ain’t working. I have removed the double popper.min.js, removed the jquery and other jses and left only that of bootstrap.js but it still persists.

As for sharing the source code from the browser, using the “view source” functionality, you will get something like this below:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WorkonproDashboard</title>
<base href="[/](http://localhost:4200/)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="[favicon.ico](http://localhost:4200/favicon.ico)">
<link rel="preconnect" href="[https://fonts.gstatic.com](https://fonts.gstatic.com/)">
<link href="[https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap](https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap)" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="[styles.css](http://localhost:4200/styles.css)"></head>
<body class="mat-typography">
<app-root></app-root>
<script src="[runtime.js](http://localhost:4200/runtime.js)" defer></script><script src="[polyfills.js](http://localhost:4200/polyfills.js)" defer></script><script src="[styles.js](http://localhost:4200/styles.js)" defer></script><script src="[scripts.js](http://localhost:4200/scripts.js)" defer></script><script src="[vendor.js](http://localhost:4200/vendor.js)" defer></script><script src="[main.js](http://localhost:4200/main.js)" defer></script></body>
</html>

Is it possible to run the full code which i sent you, to see if when it is toggled that both the sidenav and navbar displays together? Just for checking sake.

9

I’ve added the code you gave me in post #6 to the codepen below.

(I added a green background to the sidebar so I could tell where it was and blue background to your toggle.I realise that you probably have some other css that goes with these elements so probably will not look the same).

There is no code to toggle the sidebar as such (if that’s what you meant) as all you have is the toggle button for the navbar.

That doesn’t look like a view source as this is not a valid href.

<link rel="stylesheet" href="[styles.css](http://localhost:4200/styles.css)">

if that is indeed a view source then you have something wrong with the way the files are being inserted and that’s probably a question for the JS forum as its likely your angular set up at fault.

1 Like
10

You have been of great help to me. I will try and pose the question to the JS forum.

Thanks a bunch.

1 Like
12

@PaulOB

I didn’t realise just how colour blind I am regarding the green and blue colours - they are hardly discernible :frowning:

15

I changed the colours for you :slight_smile:

Although the pen is only there to show that the toggle works and obviously has all the styling missing.

1 Like
17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.