I'm facing an issue with the functionality of the Navbar toggler in my bootstrap code

Having trouble with my navbar toggler code. I've tried multiple times, but the button is not expanding to show the list on both mobile and desktop screens. Any suggestions?
Edit-1: After adding "https" before the HTTP in jquery link, the toggle collapses quickly without holding the expanded form.

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title></title>
   <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand " href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"> </span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">



      <ol class="navbar-nav ml-auto">
        <li class="navbar-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
        <li class="navbar-item">
          <a class="nav-link" href="#">Skills</a>
        </li>
        <li class="navbar-item">
          <a class="nav-link" href="#">Profile</a>
        </li>

      </ol>
</div>
  </nav>
</body>

</html>

Answer №1

It's a simple fix - just switch HTTP to HTTPS for the bootstrap.js resource and update its version.

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title></title>
   <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand " href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"> </span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">



      <ol class="navbar-nav ml-auto">
        <li class="navbar-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
        <li class="navbar-item">
          <a class="nav-link" href="#">Skills</a>
        </li>
        <li class="navbar-item">
          <a class="nav-link" href="#">Profile</a>
        </li>

      </ol>
</div>
  </nav>
</body>

</html>

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

I'm having trouble getting the "spacing" styling attribute to work in Material UI when I attempt to space out elements within my Box component. Can anyone explain why this might be happening?

Within my React 16.10 application, I am utilizing materialUI components. Specifically, I have incorporated two buttons inside a Box element. <Box style={{ marginTop: "3rem", marginLeft: "1rem", display: "f ...

The background image is not appearing on my JSP dynamic web project

Hey there! I've been working on adding a background image to my home.jsp page, but unfortunately, when I run the project, the image doesn't load and instead, a little red cross mark appears in its place. <%@ page language="java" contentType=" ...

Tips on targeting specific HTML content

Looking for assistance. I'm trying to extract HTML content from test.php <p> This is the content of a paragraph or article on a web page</p> <p>[albumname=Mount Climbing]</p> I want to process those [albumname] tags into thum ...

Unselecting a span in AngularJS: Switching selection to another span

Whenever I click on an item from my list displayed using ngrepeat, it generates another list specific to the selected element. My goal is to change the background color of the clicked element to indicate it has been selected. However, the problem arises wh ...

Tips for creating incremental progress on a pop-up page?

I am looking for guidance on creating a page with specific functionalities. Here is what I have in mind: I want to implement a button that opens a popup when clicked. The popup should display static instructions and buttons for the user to progress throu ...

Height and width properties in JQuery not functioning properly on SVG elements in Firefox

I am attempting to create an SVG rectangle around SVG text. I have noticed that when using .width() or .height() on SVG text, Chrome provides the expected results while Firefox does not. Here is a link to a demo I created on jsfiddle. $(document).ready(fu ...

"Troubleshooting cross-domain issues with iframes in Internet Explorer

My application is built with angularjs and we offer the option to embed it on other websites. Everything works well in IE11, but when the application is iframed onto a different domain's website, it stops working. I've tried adding <meta htt ...

What is the best way to link my python script to my HTML file?

Here is the current version of my HTML code for the search bar. I am looking to integrate my Python code with this HTML code in order to generate a Youtuber object and execute various functions. The goal is to have the Youtuber object created upon pressin ...

Having difficulty with submitting a modal form via Ajax Request in Laravel

Attempting to delete a user based on input from a modal form, but encountering difficulty. No error message is showing in the console. As a beginner, struggling to pinpoint the mistake. Error: Ajax request issue. Code snippet below: Blade modal section: ...

What is the best way to shift a list to the right within my navigation bar using ReactJS and CSS?

I'm looking to align a list to the right in my navbar, as shown in the image below Image Here's my navbar.js code: import React from "react"; import "./Navbar.css"; const Navbar = ({ isScrolling, information }) => { ...

Is there a way to stop the MUI Select component's width from increasing when I choose multiple options?

Please check out the demo I created on codesandbox by clicking here View codesandbox demo I have implemented the MUI Select component with various props to enable multiple options selection without a fixed width constraint. Using a grid layout, I have ev ...

Immersive full-page background with fixed top navigation bar

I currently have a sticky navbar in place and would like to incorporate a full-page cover as well. If I use the following code for the cover: <body style="background: url(https://images.unsplash.com/photo-1660665416754-e0c780103b3c) no-repeat cent ...

What is the method to stimulate a browser refresh using programming?

In my setup, I have three computers with specific roles - the Server, Client, and Viewer. As the administrator, I have control over both the server and the viewer devices. When a user from the Client machine connects to the Server, they are greeted with ...

Transform the text with a stylish touch within a 'textarea' element

I am currently working on a form with the following design: At the moment, I am at this particular stage and focusing on some minor details: One issue I have encountered is that the "Your text..." appears stuck to the top left corner of the textarea. I a ...

What is the method for customizing the NavBar color using CSS?

Hi there! I recently came across a responsive multi-level menu that caught my eye. After copying the CSS and JavaScript exactly, I ended up with this NavBar. The issue I'm facing is changing the default color (which is green) to another color. Here&ap ...

The reason behind the clickable issue with my duplicate <ion-select>

I've been working on a form using HTML, CSS, and JavaScript where I implemented an "Add" button to duplicate the form. The issue arises with the ion-select element within the duplicated form. While the original form displays all predefined options upo ...

I am looking to integrate a "reveal password" feature using Bootstrap 5

I had hoped for something similar to this Image from bootstrap However, what I ended up with was this Image on my local host This is the code I have: <input type="password" class="form-con ...

Tips for eliminating overlapping borders in a table using CSS

I've encountered an issue with my table where the border becomes darker and thicker at the intersection of two cells. Is there a way to resolve this problem? I have included my CSS code below. .custom-table-2 { border-collapse: separate; /*border- ...

Struggling with positioning of dropdowns on Bootstrap 4-alpha-2 navbar

The screenshot above showcases the responsive design functionality in Safari on OS X. The code snippet below demonstrates how the navbar is created, revealing that the dropdown menu on the right extends beyond the page. How can this issue be rectified? ...

Tips for utilizing the output of a pre-defined function within another function in SASS

How can I effectively utilize the outcome of darken( $var, 10% ) in the SASS function oppositeColor( $darkenedColor )? The code I am working with currently looks like this: $color1: #000000 !default; $color2: darken( $color1, 5% ) !default; $color3: oppos ...