The Cheese Burger button in Bootstrap 4 does not seem to be working when used outside of

I'm struggling with a simple problem and any help would be greatly appreciated. I am working on a portfolio project from and noticed that the cheeseburger button in my navbar doesn't work when I copy my code to VS Code and view it in the browser.

However, when I do the same thing in CodePen's editor, the button works perfectly fine. You can see the page in CodePen here: https://codepen.io/stealthman22/full/PeZvNK/. Here is the code snippet for the cheeseburger button:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarnavbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

Can anyone help me figure out what might be wrong? Thanks in advance!

htmlcssbootstrap-4

Answer №1

Upon testing your code on my machine, I encountered two issues that needed attention

Firstly, the bootstrap was declared before jquery.min.js. It is recommended to load jQuery before Bootstrap as Bootstrap has dependencies on the jQuery library itself.

Secondly, the integrity SHA384 of your Bootstrap CDN was found to be invalid.

An error is thrown in the console with this message:

Failed to find a valid digest in the 'integrity' attribute for resource 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js'

I replaced your CDN links with the following and it resolved the issue smoothly

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

You can view how it appears correctly in the browser now https://i.sstatic.net/0II79.png

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

Resolving the issue of "Cannot set properties of null (setting 'innerHTML') at HTMLInputElement.loader" involves identifying the root cause and implementing

Need assistance with this code. Although I believe everything is correct, it still isn't working as expected. The error mentioned in the title comes up whenever I try to use it. I've made multiple modifications to the code but it's still not ...

javascripthtmlcss

Tips for optimizing content loading without a full page refresh using Ajax

As a newcomer to the world of coding, I am currently working as a beginner webdev specialist. My boss has tasked me with enhancing the website in a way that only the inner content is reloaded when the page is refreshed while keeping the top panel, side bar ...

javascripthtmlajax

What is the process for setting up distinct radio types that will be separated?

I'm attempting to generate two separate questions with radio buttons in HTML. However, whenever I test it, I can only select one option even though I used to separate the questions to prevent interaction. Can anyone assist me? Do you agree? Yes ...

html

Navigating between divs with a 100% height using up and down movements

I am working on a website that is structured into different sections using divs with shared classes but unique IDs. Each div is set to take up 100% of the viewport height. To navigate between these sections, I want to provide Up/Down arrow buttons for user ...

javascripthtmljquerycss

Placing an eye icon on the password input field for optimal visibility and positioning

I am currently working on a Node.js project and I am attempting to incorporate an eye icon using Bootstrap into the password input field for visibility. Below is the code snippet of my input field: <div class="container"> <form ...

javascripthtmlcssbootstrap-4

Tips for organizing and securing downloaded zip files from external websites

I am currently developing an application using CodeIgniter framework. I have a requirement to only download files with a .zip extension and upload them to my local drive. In order to achieve this, I have been provided with a function called get_zip_content ...

phphtmlcodeigniter

Issues with locating the fonts: React-slick paired with nextjs

Incorporating react-slick into a NextJs project has been quite seamless, however, I'm encountering issues with importing the necessary fonts from the CSS files. To address this snag, I've attempted the following steps: npm install slick-carouse ...

cssreactjsfontsnext.jsreact-slick

Windows and MacOS each use unique methods for displaying linear gradients

Check out this code snippet featuring a background gradient background: rgba(0,0,0,0) linear-gradient(rgb(245, 245, 245),rgba(0,0,0,0)) repeat scroll 0 0; This code renders correctly on Windows (chrome, ie, firefox) https://i.stack.imgur.com/XU2gW ...

htmlcsswindowsmacos

Thymeleaf allows for the splitting of tables across different pages when generating a PDF document

I have a custom HTML template containing a table structure <table id="people" border="1"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Salary</th> </ ...

javahtmlkotlinpdfthymeleaf

Streamlining all icons to a single downward rotation

I am currently managing a large table of "auditpoints", some of which are designated as "automated". When an auditpoint is automated, it is marked with a gear icon in the row. However, each row also receives two other icons: a pencil and a toggle button. W ...

javascriptjquerycsstypescript

What could be causing the image URL to not function properly in the CSS file?

I have been struggling with this issue all day and have searched numerous sources for answers. The login.css file can be found at: WebContent/resources/css/login.css The image file is located here: WebContent/resources/img/pencil.jpg Despite my attem ...

htmlcssimagejspurl

Generate a document of purchase utilizing PHP POST array information

Currently studying PHP and delving into creating a basic cart/processing script. The item cart has been successfully developed, however, facing challenges in displaying information on the receipt once the user confirms purchasing the item(s) in their cart ...

phphtmlarrays

Is there a way to align text in the middle of a full-width jumbotron using bootstrap 4 while also restricting the maximum width of only the div or p container?

Trying to master the art of using Bootstrap 4 has been quite a journey. At first, everything seemed to work smoothly as I attempted to horizontally center some text within a full-sized jumbotron. However, things took an unexpected turn when I decided to im ...

htmlcssbootstrap-4centertext-align

Is there a way to utilize either css3 or css in order to change the icon displayed on a button

Currently, I am working on a button that contains a span element. I am interested in finding a way to change the background of the span when the button is clicked and have it remain changed. Is there a way to achieve this using CSS only? I am aware that ...

htmlcss

The border-radius property in Bootstrap buttons causes unwanted white border artifacts to appear

Strange anomalies in the borders of my Bootstrap buttons caught my attention recently. Upon further investigation, I realized that this issue is not linked to my custom styles or theme, as the artifacts can also be seen on the Bootstrap button documentatio ...

csstwitter-bootstrapbootstrap-4bootstrap-5

Animate linear-gradient using jQuery script

I have been searching for a circular progress bar plugin but haven't found one that suits my needs, so I decided to build my own using pure CSS: http://jsfiddle.net/9RFkw/ While it looks great, there are two issues I am facing: 1.) When at 25% in F ...

jquerycsscss-animationsprogress

The date selector is failing to accurately reflect changes in the date objects

I've integrated a date-time picker from this source https://github.com/DanielYKPan/date-time-picker to manage 'beginning' and 'end' date objects (refer to selectedMoments in the TypeScript code) for a date selector. However, when I ...

javascripthtmlangulartypescriptdatetime

A step-by-step guide on incorporating click and drag events into an HTML Canvas

I have developed a unique business tool using html canvas. It is equipped with a variety of draggable and droppable elements. I personally created the functionality with the following pseudocode: if(mouseIsDown && mouseInBoundsOfIcon){ icon.g ...

htmlcanvas

Having trouble accessing JavaScript Form Elements through Form Variable

For username validation in a form using JavaScript, I'm attempting to access the Label tag within the Form tag. If the Regex matches, then display an error in the Label; otherwise, hide it. However, when I try to modify the text in the text field, I e ...

javascripthtmlcssforms

Concealing and wrapping text using CSS in a table structure

My table is displayed below: <table style="width: 100%; white-space: nowrap; overflow: hidden;"> <tbody><tr> <th> Department </th> <th> Function </th> ...

htmlcss