My Bootstrap 4 Navbar isn't collapsing in Mobile View

87 views Asked by At

I am unable to open the navbar options, it's just a solid button and forms somewhat of a ring around it when clicked. I had tried some various solutions including adding and removing the scripts, changing the navbar attributes, etc

This is the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pan Indus Exim Enterprises</title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
    <link href="style.css" rel="stylesheet">
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="img/vdnewlogo.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#ab">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#con">Connect</a>
            </li>
        </ul>
    </div>
</div>
</nav>
2

There are 2 answers

1
mikhail abdillah On BEST ANSWER

At first, make sure your computer is connected to the internet. This to ensure the CDN loaded and saved by your browser.

Secondly, open the Developer tools ctrl + shift + i (chrome keyboard shortcut) and check on the tabbed console there is no error. If there have an error message, please fix it first (the most problem is the CDN link is not work or there is a typing error).

If Navbar on mobile is still not collapsing, please clear your browser data ctrl + shift + del (chrome keyboard shortcut) and reload the page.

Note: It's not recommended or bad practice to embed your script to tab head, please embed them to the end of the tag body or before </body>

0
Joshua On

It is working just make sure you have JavaScript cdn and a proper browser like Chrome, sometimes bootstrap does not support other browsers. Also make sure you are connected to Internet Especially when you are Cdn.