CODEWITHSUNDEEP
csstwitter-bootstrap
Stone
Stone

Reputation: 61

submenu under menu are not displaying

I have four menus in which one menu have 2 submenus I'm using bootstrap for this but after many tries, I'm not getting any way to solve it as I'm new to it. The main menu is not displaying the submenu when clicked.

I have tried various possible ways and when I'm adding CDN to my project it's working fine. But when I'm adding the bootstrap file from my local storage it's not displaying. But other features are working fine

<link rel="stylesheet" href="css/bootstrap.css">
<style>
    .header {
        height: 50px;
        background-color: black;
        margin-top: 3px;
    }

    .column {
        margin-left: 100px;
    }
</style>
<body>
    <nav class="navbar navbar-expand-sm  navbar-dark bg-dark header">
        <a href="#" class="navbar-brand">Stone</a>
        <ul class="nav navbar-nav column">
            <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Add Employee</a></li>

            <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" id="searchEmp" role="button">Search Employee</a>
                <div class="dropdown-menu" aria-labelledby="searchEmp">
                    <a href="#" class="dropdown-item">Search With ID</a>
                    <a href="#" class="dropdown-item">Search All Employee</a>
                </div>
            </li>
            <li class="nav-item"><a href="#" class="nav-link">About</a></li>
        </ul>
    </nav>

    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-3.4.1.js"></script>
</body>

In console it's not showing any error

Upvotes: 2

Views: 45

Answers (2)

Zuhaib
Zuhaib

Reputation: 49

you need to add popper.js too for menu to work properly.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

add this code after jquery but before bootstrap.js

Upvotes: 0

Hughes
Hughes

Reputation: 1055

Bootstrap's Javascript is dependent on jQuery. That means that in order for it to work properly, jQuery needs to be loaded first. If you switch the following lines around it should work.

<script src="js/bootstrap.js"></script>
<script src="js/jquery-3.4.1.js"></script>

Upvotes: 2

Related Questions