This is the navigation bar code:
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="/teashirt/public/">TeaShirt</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/teashirt/public/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/teashirt/public/design">Desing your Teashirt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/teashirt/public/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/teashirt/public/contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/teashirt/public/checkout">Checkout</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/teashirt/public/cart" tabindex="-1" aria-disabled="true">Cart</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Guest!</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Below is the Bootstrap JavaScript code:
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
Here is the app.js content:
require('./bootstrap');
I tried replacing require with import, but it didn't work.
I have also attempted popper upgrade and composer update, but nothing seems to fix the issue.
The problem I'm facing is that the dropdown menu in the navbar only goes to the link /# when clicked, regardless of browser used (IE or Chrome).