I am facing an issue with my Bootstrap 4 Navbar as it is not collapsing in the Mobile View

The issue I am facing is that the navbar options cannot be opened properly. When clicked, it appears as a solid button and forms a sort of ring around it. I have attempted various solutions such as adding and removing scripts, changing the navbar attributes, and so on.

Below is the code snippet:

<!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>

Answer №1

Firstly, ensure that your computer is connected to the internet in order to allow the CDNs to load and be saved by your browser.

Next, access the Developer tools by pressing ctrl + shift + i (chrome keyboard shortcut) and check the console tab for any error messages. If there are errors, address them promptly (common issues include broken CDN links or typos).

If the mobile Navbar is still not collapsing, try clearing your browser data by using the shortcut ctrl + shift + del (chrome keyboard shortcut) and then reloading the page.

Important: It is not recommended or considered good practice to embed your scripts in the header section. Instead, place them at the end of the body tag or just before </body>.

Answer №2

Ensure that you have JavaScript cdn and a compatible browser such as Chrome for proper functionality. Bootstrap may not always work with other browsers. Additionally, make sure you are connected to the Internet, especially when using Cdn services.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying KineticJs.Image with css styling

Hey there, I'm currently working on a project that involves canvas manipulation. I've successfully figured out how to draw an image and move it within the canvas, which wasn't too difficult to achieve. However, I'm now facing a challeng ...

Adjust the div height to 100% in Bootstrap to center text, even with the presence of a navbar

I'm currently using Bootstrap 5 and facing an issue with getting text centered vertically on the page. I attempted to make the container of the div take up 100% of the page by using h-100, but it resulted in overflow due to the navbar occupying some s ...

What is the best way to align the text next to the initial input and expand the text close to the second input field?

I am an avid user of Bootstrap 4. BC stands as a global pioneer in online news and information, striving to educate, engage, and empower individuals worldwide. - this content should be positioned to the right of the top input field. https://i.sstatic.n ...

Is it possible for Firebug to display CSS comments? This feature would greatly assist in utilizing SASS

Can Firebug display CSS comments? I'm wondering if it can help with debugging when using line numbers from SASS. I haven't been able to find any information on this feature, so any help would be greatly appreciated. ...

Is it possible for Bootstrap to hide a grid column on extra small screens by setting its column width to zero?

Is there a specific Bootstrap class that allows me to hide a grid column for certain screen sizes without using media queries and the "display:none" style? ...

How can you give a div a background without any text inside?

I am struggling to create an HTML element with a background image using CSS, but the background does not show up unless there is text inside the element. CSS - #box { background:url(.....) } HTML - <div id="box">something</div> // this w ...

Can you explain the purpose of this.element within a jQuery function?

Recently, I came across an enlightening explanation of the jQuery UI combobox by Jörn Zaefferer. If you're interested in checking it out as well, here's the link. One particular line of code that caught my attention was: var select = this.eleme ...

I have noticed that the Javascript code is being loaded prior to the completion of my HTML/CSS page for some unknown

I am completely new to the world of web development. I'm encountering an issue where my JavaScript code (specifically alerts) is loading before my HTML/CSS page has fully loaded. I've been using sample alerts to test this out, and ideally, they s ...

Traversing through nested JSON using a jQuery each loop

My goal is to implement a simple JSON file that can be used to populate multiple select boxes. The starting point is a static select box with the following options: <select> <option value="first">This is the first</option> <option val ...

How can I update the background color of the specified element when the text changes without triggering a postback?

Seeking guidance on JavaScript as I am not very adept in it. We have a webpage where users upload .XLS/.CSV files and review the data before submitting it to our database. Users can edit cells in the uploaded document on our "review" screen before final su ...

Utilizing block buttons within a div containing a Bootstrap button group

My dilemma is trying to center a button group within a container while also making each button occupy half of the container's width. I've attempted using "w-50" and "btn-block," but they don't seem to work when in conjunction with "btn-group ...

Selenium struggles to locate elements within Iframes even when they are clearly visible

My current project involves developing code to automatically log into the Life is Feudal game website in order to gather specific information. This information is legally accessible manually, but it would be extremely time-consuming to collect everything w ...

Never-ending accessible document available for download to test internet speed

For my download speed tester project, I am implementing a straightforward method. I download a large image file from the internet and check if it arrives within a reasonable time frame. The specific file I am using is sourced from here. However, I am conc ...

What steps should I take to incorporate Google sign-in on my website and gather user information efficiently?

I am looking to add the Google sign-in button to my website. While I am knowledgeable in HTML, PHP and JavaScript are not my strong suits. My goal is to allow users to sign in with their Google account and securely store their information on my database th ...

Determining the background image size of a div when the window is resized

I'm facing a problem that I can't seem to solve. I have a div with a background image. <div class="a"></div> I want to make a specific point of this background image clickable. I know I can achieve this by adding a div with a z-inde ...

How can I dynamically insert HTML content into a data-attribute using JavaScript?

I have been trying to insert a variable that includes HTML code into a DATA attribute (a href ... data-content= ...), but it isn't functioning properly. The code I input seems to delete certain characters and as a result, it does not display correctly ...

The initialization of the R Shiny HTML canvas does not occur until the page is resized

I am currently facing an issue while integrating an HTML page with a canvas into my shiny R application using includeHTML(). The packages I am using are shiny, shinydashboard, shinycssloaders, dplyr, and DT. Everything is working perfectly fine except for ...

A guide to retrieving hyperlinks from an HTML table with Selenium

I am currently working on a Java and Selenium code snippet like the one below: public static void main(String[] args){ WebDriver driver; DesiredCapabilities caps; caps = new DesiredCapabilities(); caps.setCapability(PhantomJSDriverService ...

Unable to ensure uniform height for React MUI Cards

I am facing a challenge with my dashboard layout that consists of 3 cards, each containing a separate component. The height of the cards dynamically adjusts based on their content. My goal is to make all 3 cards have the same height as the one with the t ...

What causes performance issues when utilizing mouseover events in JQuery?

var mouseX; var mouseY; $(document).mousemove( function(e) { mouseX = e.pageX; mouseY = e.pageY; }); $(".test").mouseover(function(){ $('#DivToShow').css({'top':mouseY,'left':mouseX, 'display':'block&ap ...